Закруглённые углы через CSS

Наверняка, Вы часто встречали блоки с закруглёнными углами. За примером далеко ходить не надо, достаточно посмотреть вправо и приглядеться к моим блокам, у которых как раз углы и закруглены. Стоит отметить, что способов создания этого очень много. У каждого из них есть свои преимущества и недостатки, и я рассмотрю один из них, которым обычно и пользуюсь.

Для начала потребуются 4 изображения, каждое из которых отвечает за свой угол блока. Далее напишите такой HTML-код:

И такой CSS-код:

.roundborder {
  border: 2px solid #ffd460;
}
.roundborder div {
  background: url(../images/t-l.png) top left no-repeat;
  margin: -2px;
  position: relative;
}
.roundborder div div {
  background: url(../images/t-r.png) top right no-repeat;
  margin: 0;
}
.roundborder div div div {
  background: url(../images/b-r.png) bottom right no-repeat;
}
.roundborder div div div div {
  background: url(../images/b-l.png) bottom left no-repeat;
  padding: 20px;
}

По названию картинок, думаю, что их назначение понятно, однако, на всякий случай поясню:

t-l - верхний левый угол
t-r - верхний правый угол
b-l - нижний левый угол
b-r - нижний правый угол

Свойство padding Вы можете задавать своё, так как оно всего лишь делает отступ контента от закруглённой рамки. Также обратите внимание, свойство border должно быть толщиной с рамкой в картинке, а свойство margin: -2px, возможно, так же придётся поменять, поскольку это значение должно равняться ширине картинки, взятой со знаком минус.

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