Закругленные углы модулей, баннеров на HTML+CSS

Да, бывает необходимо сделать скругленные углы средствами HTML+CSS.
Методов несколько. Добавлю их в эту напоминалку по мере вспоминания.

1. Метод №1.
Нам понадобится круглая картинка (радиусом соответсвующая радиусу необходимых заготовок). Например черный круг радиусом 20px.
И небольшие инструкции CSS.

Как сделать закругленные углы в Photoshop (Фотошоп)?

Инструкция:
1. Открываем изображение: "File::Open::Изображение"
2. Добираемся до инструмента "Rounded Rectangle Tool" в панельке "Tools".
3. Сверху в настройках инструмента выбираем "Paths" и задаем радиус закругления.
4. Идем к нашему изображению и выделяем область точно по краям.
5. После кликаем правой кнопкой мышки по изображению и в выпадающем меню жмем "Make Selection". Перед Вами выскачет окошко и ничего не меняя просто жмем "Ok". Тем самым мы выделили область закругления…
6. Далее жмем "Select::Inverse….
7. Теперь жмем кнопку "Delete" для удаления выделенного.
8. И ctrl+D для снятия выделения.

Что должно быть в HTML:

<div id="corners">
	<div id="tl"></div>
	<div id="tr"></div>
	<div id="br"></div>
	<div id="bl"></div>
	<div id="spacer"><div>Содержимое блока</div></div>
</div>

Что должно быть в CSS:

div#corners {border:1px solid black; position:relative;}
div#tl {background:transparent url(../images/corner.gif) no-repeat scroll 0 0; left:-1px; top:-1px;}
div#tr {background:transparent url(../images/corner.gif) no-repeat scroll 100% 0; right:-1px; top:-1px;}
div#bl {background:transparent url(../images/corner.gif) no-repeat scroll 0 100%; bottom:-1px; left:-1px;}
div#br {background:transparent url(../images/corner.gif) no-repeat scroll 100% 100%; bottom:-1px; right:-1px;}
div#spacer {padding:5px;} /* необязетельно */

Должно работать так: когда картинки отключены — углы прямоугольные, когда включены — углы скругленные прямоугольными секторами картинки.

В продолжение вероятно добавлю методы получения закруглений без помощи картинок, только CSS.

Комментарии:

Вы можете использовать эти теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

*Required Fields