<rmcreative>

RSS

Все заметки с тегами «CSS, border-radius, Круглые уголки»

Можно уточнить:

  1. Кроссбраузерный border-radius

    7 января 2010

    Одной из самых больных тем верстальщиков являются скругление уголков. В последнее время ситуация улучшается и браузеры потихоньку начинают поддерживать столь востребованные CSS-свойства. FF, Safari, Chrome делают это через свойства с своими особыми префиксами, Opera — скоро будет делать без префиксов. В стороне у нас стоит, как всегда, IE.

    К счастью, IE можно довольно красиво победить его же средствами. Одно из понравившихся мне решений, использующее VML и behaviour — curved-corner. Для использования сливаем border-radius.htc, складываем рядом с CSS и используем следующий код:

    .my-block {
      /* Для хороших браузеров */
      -moz-border-radius: 10px; /* Firefox */
      -webkit-border-radius: 10px; /* Safari, Chrome */
      -khtml-border-radius: 10px; /* KHTML */
      border-radius: 10px; /* CSS3 */
      /* Для плохих IE */
      behavior: url(border-radius.htc); /* учим IE border-radius */
    }

    Да, кстати, по соседству можно найти менее востребованный, но всё же полезный behaviour для box-shadow.

    Демо

    69 комментариев