Свойство border-top-left-radius

Последнее обновление: 04.05.2011

Свойство border-top-left-radius — задает радиус скругления левого верхнего угла элемента.

Допустимые значения

  • <значение> — точное значение радиуса (не может быть отрицательным)
  • <процент> — значение радиуса в процентах.

Есть возможность задать эллиптические радиусы используя пробел. Значение до пробела — радиус по оси х, а после пробела — радиус по оси у.

иллюстрация показывающая эллиптический радиус
эллиптический радиус

Если значения указаны в процентах, то значение радиуса по оси х отсчитывается в процентах от ширины блока, а значение радиуса по оси у — от высоты блока.

Значение по умолчанию 0
Применимо ко всем элементам, кроме табличных элементов для которых свойство border-collapse имеет значение ‘collapse’.
Наследование нет
Версия CSS CSS 3
Поддерживается браузерами
  • Internet Explorer 9 и выше
  • Firefox 4 и выше
  • Opera 10.5 и выше
  • Safari 5 и выше
  • Chrome 5 и выше

Пример

.block {
width:100px;
height:50px;
border-top-left-radius: 10px 20px;
border: 1px solid #000;
}
Твой код:
Результат:
большой полигон

Заметки

Это свойство относится к CSS3 модулю CSS Backgrounds and Borders Module Level 3 — кандидата в рекомендацию W3C с 17 декабря 2009 года.

Safari 3-5 и Chrome 1-5 поддерживают аналогичное свойство -webkit-border-top-left-radius, а Firefox 1.0-4.0 -moz-border-radius-topleft, но эти свойства не полностью соответствуют спецификации. В частности, -webkit-border-top-left-radius не поддерживает значения радиусов, заданные в процентах, а -moz-border-radius-topleft рассчитывает радиус по оси y в процентах от ширины блока, а не от высоты, как в спецификации. Возможность задать эллиптические радиусы через пробел поддерживается в Safari 3 и Chrome 1 и выше и в Firefox 3.5 и выше.

По теме

Показать комментарии