div с закругленными углами

Каждый верстальщик сайтов сталкивался с задачей создания слоя с закругленными углами. Сделать слой одного фона с закругленными углами очень просто.

Нам понадобится создать 4 изображения-угла, CSS и HTML.

CSS

<!-- родительский слой должен иметь цвет фона, такой же как у углов .round-gray {background-color:#dddddd; width:300px;} /** * фоновое изображение каждого углами не повторяется * tl - top left (верхний левый) * tr - top right (верхний правый) * br - bottom right (нижний правый) * bl - bottom left (нижний левый) * */ .round-gray .tl, .round-gray .tr, .round-gray .br, .round-gray .bl {background-repeat:no-repeat;} <!-- для каждого угла прописываем свое изображение и позицию на слое .round-gray .tl {background-image:url('/i/round/gray/tl.gif'); background-position:top left;} .round-gray .tr {background-image:url('/i/round/gray/tr.gif'); background-position:top right;} .round-gray .br {background-image:url('/i/round/gray/br.gif'); background-position:bottom right;} .round-gray .bl {background-image:url('/i/round/gray/bl.gif'); background-position:bottom left;} <!-- отступы и прочее на стиле с текстом, при желании можно еще слой вставить .round-gray .bl {padding:10px 20px;}

HTML

<div class="round-gray"> <div class="tl"> <div class="tr"> <div class="br"> <div class="bl">DIV с закругленными углами очень легко сделать при помощи CSS.</div> </div> </div> </div> </div>

Результат

Если все сделано правильно, на экране появится такой прямоугольник:
DIV с закругленными углами

Смотреть пример онлайн

Углы

Цвет фона: #DDDDDD;

top left — http://expange.ru/i/round/gray/tl.gif (верхний левый)

top left — http://expange.ru/i/round/gray/tr.gif (верхний правый)

top left — http://expange.ru/i/round/gray/bl.gif (нижний левый)

top left — http://expange.ru/i/round/gray/br.gif (нижний правый)

Скачать углы одним архивом.

Категории

Веб-дизайнHTMLВерстка

Комментарии