Свойство CSS border-top-right-radius

Свойство CSS border-top-right-radius определяет форму скругления верхнего правого угла элемента.

Данное свойство входит в число свойств CSS3.

Существует три вида скругления: круг, эллипс или значение 0, при котором угол остается прямым. Если вы используете фоновое изображение или цвет, они будут обрезаны по границе. Процесс обрезки определяется значением свойства background-clip.

Свойство принимает значения длины, процента, initial и inherit. Свойство border-top-right-radius задает горизонтальный и вертикальный радиусы, определяющие скругленный верхний правый угол для рамки блока. Если указано только одно значение, оно задает как горизонтальный, так и вертикальный радиусы эллипса. Если указано два значения, первое задает горизонтальный радиус, а второе — вертикальный. Проценты для горизонтального радиуса относятся к ширине блока, а проценты для вертикального радиуса — к его высоте. Отрицательные значения не допускаются.

Начальное значение	0
Применяется к	Всем элементам. Также применяется к ::first-letter.
Наследуется	Нет.
Анимация	Да. Верхняя правая граница анимируется.
Версия	CSS3
Синтаксис DOM	object.style.borderTopRightRadius = "25px";

Синтаксис

Синтаксис свойства CSS border-top-right-radius

css

border-top-right-radius: length | % | initial | inherit;

Рассмотрим пример, где используется только одно значение. Оно задает как горизонтальный, так и вертикальный радиусы эллипса.

Пример свойства border-top-right-radius:

Пример свойства CSS border-top-right-radius с одним значением

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        height: 40px;
        background: #666;
        border: 4px solid #000000;
        border-top-right-radius: 35px;
      }
    </style>
  </head>
  <body>
    <h2>Border-top-right-radius example.</h2>
    <div></div>
  </body>
</html>

Try it Yourself »

При указании двух значений первое определяет горизонтальный радиус, а второе — вертикальный.

Результат

CSS border-top-right-radius Property

Пример свойства border-top-right-radius с двумя значениями:

Пример свойства CSS border-top-right-radius с двумя значениями

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        height: 40px;
        background: #666;
        border: 4px solid #000000;
        border-top-right-radius: 35px 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-top-right-radius example.</h2>
    <div></div>
  </body>
</html>

Try it Yourself »

Пример свойства border-top-right-radius в процентах:

Пример свойства CSS border-top-right-radius со значением % (проценты)

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        height: 40px;
        background: #1c87c9;
        border: 4px solid #000000;
        border-top-right-radius: 60% 30%;
      }
    </style>
  </head>
  <body>
    <h2>Border-top-right-radius example.</h2>
    <div></div>
  </body>
</html>

Try it Yourself »

Значения

Значение	Описание	Попробовать
length	Определяет форму скругления верхнего правого угла.	Попробовать »
%	Определяет форму скругления верхнего правого угла в %.	Попробовать »
initial	Устанавливает свойству значение по умолчанию.	Попробовать »
inherit	Наследует свойство от родительского элемента.

Практика

Что делает свойство CSS 'border-top-right-radius'?

Оно задает форму границы в верхнем правом углу.Оно задает цвет границы в верхнем правом углу.Оно задает ширину границы в верхнем правом углу.Оно используется для скругления верхнего правого угла.

Свойство CSS border-top-right-radius ​

Синтаксис ​

Пример свойства border-top-right-radius: ​

Результат ​

Пример свойства border-top-right-radius с двумя значениями: ​

Пример свойства border-top-right-radius в процентах: ​

Значения ​

Практика ​

Свойство CSS border-top-right-radius

Синтаксис

Пример свойства border-top-right-radius:

Результат

Пример свойства border-top-right-radius с двумя значениями:

Пример свойства border-top-right-radius в процентах:

Значения

Практика