CSS приклад: border-top-left-radius

Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1.0+ 10.5+ 3.0+ 1.0+ 2.1+ 1.0+

Коротка інформація

Значення за замовчуванням0
НаслідуєтьсяНі
Відсотковий записТак, відносно ширини блока
ЗастосовуєтьсяДо всіх елементів
Посилання на специфікаціюhttp://www.w3.org/TR/css3-background/#border-top-left-radius

Версії CSS

CSS 1CSS 2CSS 2.1CSS 3

Опис

Встановлює радіус закруглення лівого верхнього кута рамки. Якщо рамка не задана, то закруглення також відбувається із фоном.

Синтаксис

border-top-left-radius: [значення | відсотки] [значення | відсотки]

Значення

Як радіусу вказується будь-яке допустиме значення в CSS (px, cm, in, em та ін.), а також відсотки, у цьому випадку радіус закруглення вважається від ширини блока.

Друге необов'язкове значення призначене для створення еліптичного кутка, перше значення при цьому встановлює радіус по горизонталі, а друге — радіус по вертикалі.

Приклад використання наведено на рис. 1.

Браузери

Firefox до версії 4.0 використовує нестандартне властивість -moz-border-radius-topleft.

Chrome до версії 4.0, Safari до версії 5.0, iOS використовують нестандартну властивість -webkit-border-top-left-radius.

Скруглені кути

Часті запитання

  • Q: Як використовувати border-top-left-radius в CSS?

    A: border-top-left-radius в CSS використовується для задання радіуса заокруглення верхнього лівого кута елемента.

  • Q: Де можна використовувати border-top-left-radius в CSS?

    A: border-top-left-radius можна використовувати в CSS для заокруглення верхнього лівого кута блоків, кнопок, таблиць та інших елементів.

  • Q: Як задати конкретний радіус заокруглення з використанням border-top-left-radius в CSS?

    A: Для задання конкретного радіуса заокруглення з використанням border-top-left-radius в CSS вказується значення радіуса, наприклад, в пікселях або відсотках.

  • Q: Чи підтримується властивість border-top-left-radius в усіх браузерах?

    A: Властивість border-top-left-radius підтримується усіма сучасними браузерами, але може виникнути проблеми з сумісністю у старіших версіях IE.

  • Q: Як використовувати border-top-left-radius разом з іншими властивостями CSS?

    A: border-top-left-radius може бути комбінована з іншими властивостями CSS, такими як border, background, а також з іншими border-radius для створення складних ефектів заокруглення.