CSS - Скругленные уголки

[J-Fobos]

Все наверное сталкивались с врезками с закруглёнными уголками. Поскольку множественный бекграунд современные браузеры не поддерживают (насколько мне известно), то такие вещи приходится делать несколькими элементами, вложенными друг в друга.
Есть способ уже сейчас избежать подобных вещей.

[Ссылки могут видеть только зарегистрированные пользователи. ]

Задаем голубой фон врезки:

.incut{background: #dff7ff;padding: 20px;}

Четыре уголка навешиваем на элементы :before и :after

.incut:before{
content:url(img/border_tl.gif);
background: url(img/border_tr.gif) no-repeat 100% 0;
height: 7px;
display: block;
margin: -20px -20px 13px -20px;
}
.incut:after{
content:url(img/border_bl.gif);
background: url(img/border_br.gif) no-repeat 100% 0;
height: 7px;
display: block;
margin:13px -20px -20px -20px;
}

В результате имеем врезку с минимум html-кода. Заметьте, что вы можете указать ещё одну картинку у врезки, которая будет её бекграундом.
Применяя эти псевдоэлементы аналогичным образом можно значительно увеличить семантичность верстки. Всё зависит от вашей фантазии.

Пример использования можно увидеть [Ссылки могут видеть только зарегистрированные пользователи. ]. В примере также имеется затычка для ИЕ7.

[andrewi]

Через изображения такое делать - фу! Используйте лучше CSS3:

.classname {
 -webkit-border-radius:20px;/*20px 15px 10px 5px для каждого угла*/
 -moz-border-radius:20px;/*20px 15px 10px 5px для каждого угла*/
 -o-border-radius:20px;/*20px 15px 10px 5px для каждого угла*/
 border-radius:20px;/*20px 15px 10px 5px для каждого угла*/
 /*Все новые браузеры это читают: chrome,chromium,FF,opera,IE9,10,safari*/
 /*Для IE 7,8 ставьте PIE.htc -- google */
}

[maslo2011]

andrewi, Легче тогда сразу:

.classname {
 border-radius: 5px;
}

[Rmy]

Цитата: Сообщение от J-Fobos Все наверное сталкивались с врезками с закруглёнными уголками. Поскольку множественный бекграунд современные браузеры не поддерживают (насколько мне известно), то такие вещи приходится делать несколькими элементами, вложенными друг в друга. Есть способ уже сейчас избежать подобных вещей. [Ссылки могут видеть только зарегистрированные пользователи. ] Задаем голубой фон врезки: .incut{background: #dff7ff;padding: 20px;} Четыре уголка навешиваем на элементы :before и :after .incut:before{ content:url(img/border_tl.gif); background: url(img/border_tr.gif) no-repeat 100% 0; height: 7px; display: block; margin: -20px -20px 13px -20px; } .incut:after{ content:url(img/border_bl.gif); background: url(img/border_br.gif) no-repeat 100% 0; height: 7px; display: block; margin:13px -20px -20px -20px; } В результате имеем врезку с минимум html-кода. Заметьте, что вы можете указать ещё одну картинку у врезки, которая будет её бекграундом. Применяя эти псевдоэлементы аналогичным образом можно значительно увеличить семантичность верстки. Всё зависит от вашей фантазии. Пример использования можно увидеть [Ссылки могут видеть только зарегистрированные пользователи. ]. В примере также имеется затычка для ИЕ7.

Спасибо! Хотя моя работа связана с CSS, но я даже представить себе не мог про такой способ решения проблемы. Но всему приходит конец, и я думаю это к лучшему ибо одна строка zencoda br:5 заменяет 20 строк. Можно смело ложить в музей истории

Продолжайте тему если есть чем поделится буду следить

[DreamTheater]

Из всех вариантов, что я пробовал, во всех браузерах работал только один:

border-radius:10px 10px 0px 0px;
-moz-border-radius:10px 10px 0px 0px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;

Это пример элемента со скругленными верхними краями.
Углы считать по часовой стрелке: ВхЛв,ВхПр,НжПр,НжЛв.

[Дэн_москва]

Цитата: Сообщение от maslo2011 andrewi, Легче тогда сразу: .classname { border-radius: 5px; }

Не все браузеры будут поддерживать

[True32]

Для этого и применяют pie.htc для Ie
Все нормальным css3 браузеры поддерживают border-radius

[Дэн_москва]

Цитата: Сообщение от True32 Для этого и применяют pie.htc для Ie Все нормальным css3 браузеры поддерживают border-radius

Да, но для многих браузеров надо писать префиксы