CSS приклад: border-top-right-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-right-radius

Версії CSS

CSS 1CSS 2CSS 2.1CSS 3

Опис

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

Синтаксис

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

Значення

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

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

Браузери

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

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

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

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

    A: Значення border-top-right-radius вказує радіус закруглення верхнього правого кута елемента. Наприклад: border-top-right-radius: 10px;

  • Q: Де використовують border-top-right-radius в CSS?

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

  • Q: Як задати різні значення для border-top-right-radius в CSS?

    A: Можна вказати різні радіуси закруглення для верхнього правого кута, наприклад: border-top-right-radius: 10px 5px;

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

    A: Так, border-top-right-radius підтримується у всіх сучасних браузерах, включаючи Chrome, Firefox, Safari, Edge і Opera.

  • Q: Як створити внутрішню рамку з закругленими кутами за допомогою border-top-right-radius?

    A: Щоб створити внутрішню рамку з закругленими кутами, можна використати border-top-right-radius разом з властивістю padding.