Скруглённые углы на CSS без картинок

4 февраля 2010 года | Вёрстка

css, curved corners, скругленные уголки, border-radius, not images

Наверное, каждый кто верстал веб-страницы встречался с проблемой, как сверстать скругленные уголки, которые так нравятся дизайнеру и так «не нравятся» браузерам. Впереди новая эра CSS3, но это не близкое будущее.

Последние пару дней был занят вёрсткой нового проекта и как обычно столкнулся с проблемой круглых уголков. Сначала даже решил сделать всё в новом стиле. То есть, чтобы те браузеры которые поддерживают свойство border-radius или аналогичный в своем движке, отображались скругленные уголки. А в остальных оставались неизменными, прямыми. Но, посовещавшись с работниками студии, решили, что из-за IE и Opera нужно вернуться к старым проверенным способам вёрстки.

В этот раз я бы хотел рассказать о верстке красивых уголков не используя картинок. А так как картинок нет, то и не нужно ждать, пока они загрузятся, и пользователь сразу увидит правильный вариант отображения страницы.

Начать как обычно надо с HTML разметки. Для примера, я решил показать небольшой блок с текстом. Смотрим:

<div class="message">
  <div class="text">
    <p>Это тестовое сообщение для блока со скруглёнными уголками.</p>
    <p>А это второй абзац тестового сообщения.</p>
  </div>
</div>

У нас главный блок с классом .message, внутри него добавляю обвертку для текста с классом .text. Пропишем основные стили для этих блоков:

.message {
  width: 400px; /* устанавливаем ширину блока */
  margin: 100px auto;  
  position: relative; /* понадобится для уголков*/
  background-color: #faec89; /* цвет фона */
  color: #000; /* цвет текста */      
}
.message .text {
  position: relative;
  padding: 10px 15px; /* сделаем отступ от краев */
  z-index: 2; /* текст «превыше» всего  */
}

исходный пример, скругленные углы

А теперь самый интересный момент. Каким образом будут сформированы у нас уголки. Для этого мы над нашей обверткой текста добавим несколько тегов. Внутри которых будет символ &bull;. Он похож на жирную точку, ядро, а ещё полезный типографический символ. Смотрим пример:

<div class="message">
  <em class="tl"><b>&bull;</b></em>
  <em class="bl"><b>&bull;</b></em>
  <em class="tr"><b>&bull;</b></em>
  <em class="br"><b>&bull;</b></em>
  <div class="text">
    <p>Это тестовое сообщение для блока со скруглёнными уголками.</p>
    <p>А это второй абзац тестового сообщения.</p>
  </div>
</div>

Возможно вы уже догадались, что этот символ из себя представляет. А если нет, то он выглядит вот так «•». Дальше мы пропишем общий стиль для тегов em:

.message .tl,
.message .bl,
.message .tr,
.message .br {
  width:20px;
  height:20px; /* установим ширину и высоту */
  position:absolute; /* свободный полёт */
  z-index:1; /* уголки будут под осноным блоком */
  overflow:hidden; /* прячем лишнее */
  background-color: #fff; /* цвет общего фона */
  color:#faec89; /* под цвет фона сообщения */
  font-style:normal; /* убираем ненужный стиль */
}

Теперь зададим каждому уголку своё положение в блоке:

.message .tl {top:0; left:0;}
.message .bl {bottom:0; left:0;}
.message .tr {top:0; right:0;}
.message .br {bottom:0; right:0;}

Но вот и добрались до нашего символа, оформим его:

.message em b {
  position:absolute;
  font-size:150px; /* увеличиваем размер шрифта */
  font-family:arial;
  color:#faec89; /* цвет фона сообщения */
  line-height:40px;
  font-weight:normal; /* убираем ненужное */
}

Получилось слегка не так как хотелось, а значит нужно задать смещение, чтобы наши уголки встали на свои места:

.message .tl b {left:-8px;}
.message .tr b {left:-25px;}
.message .bl b {left:-8px; top:-17px;}
.message .br b {left:-25px; top:-17px;}

Вот теперь полный порядок, всё довольно отлично смотрится:

Скругленные уголки без картинок

Ну и конечно, напоследок, ссылка на готовый пример.

Жду ваших комментариев и отзывов.

Добавлено 06.02.2010

В твиттере пользователь alunyov задал вопрос: «А что делать если не включено сглаживание шрифтов?».

Проверил, отключил сглаживание. Arial отлично справился, и уголки также замечательно смотрятся:

Скруглённые уголки, отключенное сглаживание

  • http:medialworld.com sad

    На данный момент это лучший вариант скругления уголков стилями. Все остальные используют слишком много кода.

    Жаль что нельзя этот метод применять к таким сложным случаям как полупрозрачные блоки со скругленными уголками и блоки с тенью. Хотя тень можно еще попробовать создать, но количество лишнего кода не радует.

  • divbyzero

    Да, этот способ характерен только для монотонного фона. Это можно считать минусом данной реализации.

  • Гость

    Гениально!

  • Sania_free

    как сделать для меню
    Скруглённые углы в іе,если значение hover