Предыдущий способ по созданию закругленных уголков хорош всем, кроме двух вещей. Данный метод позволяет справиться только с одной проблемой - большим количеством кода.
Новая задача: сделать блок с закругленными уголками с минимумом html-кода.
Закругляем уголки с помощью :before и :after
Такие элементы, как :before и :after существуют в css начиная с версии 2.0, однако они почему-то мало кому известны.
В общем, лучше на примере. Допустим, у нас есть такой контейнер:
<div class="box">
Контент
</div>
плюс этого метода в том, что больше HTML не будет! В исходном коде будет записано только это!!
Теперь по css'y:
Задаем требуемый фон для нашего блока:
.box {
background: #D27B24;
padding: 15px;
}