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

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в различных версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

Свойство border-top-right-radius CSS скругляет верхний правый угол элемента, задавая радиус (или радиусы большой и малой полуосей) эллипса, определяющего кривизну угла.

Попробуйте

border-top-right-radius: 80px 80px;

border-top-right-radius: 250px 100px;

border-top-right-radius: 50%;

border-top-right-radius: 50%;
border: black 10px double;
background-clip: content-box;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with a top right rounded corner.
  </div>
</section>

#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: #5b6dcd;
  color: white;
  padding: 10px;
}

Синтаксис

/* the corner is a circle */
/* border-top-right-radius: radius */
border-top-right-radius: 3px;

/* the corner is an ellipse */
/* border-top-right-radius: horizontal vertical */
border-top-right-radius: 0.5em 1em;

border-top-right-radius: inherit;

/* Global values */
border-top-right-radius: inherit;
border-top-right-radius: initial;
border-top-right-radius: revert;
border-top-right-radius: revert-layer;
border-top-right-radius: unset;

С одним значением:

значение представляет собой <length> или <percentage>, обозначающее радиус круга, который используется для границы этого угла.

С двумя значениями:

первое значение представляет собой <length> или <percentage>, обозначающее горизонтальную большую полуось эллипса, который используется для границы этого угла.
второе значение представляет собой <length> или <percentage>, обозначающее вертикальную большую полуось эллипса, который используется для границы этого угла.

Значения

<length-percentage>: Обозначает размер радиуса круга или большой и малой полуосей эллипса. Абсолютную длину можно задать в любых единицах, допустимых для типа данных CSS <length>. Проценты для горизонтальной оси отсчитываются от ширины блока, а для вертикальной оси — от его высоты. Отрицательные значения недопустимы.

Описание

Скругление может быть круговым или эллиптическим; если одно из значений равно 0, скругление не выполняется и угол остаётся прямым.

Фон — изображение или цвет — обрезается по границе, в том числе скруглённой; точное место обрезки определяется значением свойства background-clip.

Примечание: Если значение этого свойства не задано в сокращённом свойстве border-radius, которое применяется к элементу после свойства CSS border-top-right-radius, сокращённое свойство сбрасывает его значение к исходному.

Формальное определение

Исходное значение	0
Применяется к	всем элементам; однако пользовательские агенты не обязаны применять его к элементам <code>table</code> и <code>inline-table</code>, если `border-collapse` имеет значение <code>collapse</code>. Поведение для внутренних элементов таблицы пока не определено.
Наследуется	нет
Проценты	относятся к соответствующему измерению рамки границы
Вычисленное значение	две абсолютные величины `<length>` или `<percentage>`
Тип анимации	$1$, <a href="/en-US/docs/Web/CSS/Reference/Values/percentage#interpolation" title="Values of the <percentage> CSS data type are interpolated as real, floating-point numbers.">percentage</a> or calc();

Формальный синтаксис

border-top-right-radius = 
  <length-percentage [0,∞]>{1,2}

<length-percentage> = 
  <length> |
  <percentage>

Примеры

Дуга окружности

Одно значение <length> создаёт дугу окружности.

<div></div>

div {
  border-top-right-radius: 40px;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}

Дуга эллипса

Два разных значения <length> создают дугу эллипса.

<div></div>

div {
  border-top-right-radius: 40px 20px;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}

Квадратный элемент с радиусом в процентах

Для квадратного элемента одно значение <percentage> создаёт дугу окружности.

<div></div>

div {
  border-top-right-radius: 40%;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}

Неквадратный элемент с радиусом в процентах

Для неквадратного элемента одно значение <percentage> создаёт дугу эллипса.

<div></div>

div {
  border-top-right-radius: 40%;
  background-color: lightgreen;
  border: solid 1px black;
  width: 200px;
  height: 100px;
}

Спецификации

Спецификация
Модуль фонов и границ CSS, уровень 3 # propdef-border-top-right-radius

Совместимость с браузерами

	Настольные					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android	WebView на iOS
`border-top-right-radius`	4 1	12 12	4 До Firefox 50 стили границы скруглённых углов всегда отображались так, как будто `border-style` была сплошной. Это исправлено в Firefox 50. 49 1–12	10.5 15	5 3	18 18	4 До Firefox для Android 50 стили границы скруглённых углов всегда отображались так, как будто `border-style` была сплошной. Это исправлено в Firefox для Android 50. 49 4–14	11 14	4.2 1	1.0 1.0	4.4 4.4	4.2 1
`elliptical_corners`	1	12	3.5	10.5	3	18	4	14	1	1.0	4.4	1
`percentages`	4	12	4 1–4 До Firefox 4 `<percentage>` отсчитывались от ширины блока даже при задании радиуса для высоты. Это означало, что `-moz-border-radius-bottomright` всегда рисовало дугу окружности, а не эллипса, если за ним следовало одно значение.	10.5	5	18	4	14	4.2	1.0	4.4	4.2

См. также

Сокращённое свойство border-radius
border-bottom-right-radius, border-bottom-left-radius и border-top-left-radius

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/border-top-right-radius