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

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

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

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

Попробуйте

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

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

border-top-left-radius: 50%;

border-top-left-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 left 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-left-radius: radius */
border-top-left-radius: 3px;

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

border-top-left-radius: inherit;

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

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

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

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

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

Значения

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

Описание

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

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

Примечание: Если значение этого свойства не задано в сокращенном свойстве border-radius, примененном к элементу после свойства CSS border-top-left-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="Значения типа данных CSS <percentage> интерполируются как действительные числа с плавающей точкой.">percentage</a> или calc();

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

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

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

Примеры

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

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

<div></div>

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

Дуга эллипса

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

<div></div>

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

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

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

<div></div>

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

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

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

<div></div>

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

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

Спецификация
Модуль CSS «Фоны и рамки», уровень 3 # propdef-border-top-left-radius

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

	Настольные компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari для iOS	Samsung Internet	WebView для Android	WebView для iOS
`border-top-left-radius`	4 1	12 12	4 До Firefox 50 стили рамок скругленных углов всегда отображались так, как если бы `border-style` имело значение solid. Эта проблема исправлена в Firefox 50. 49 1–12	10.5 15	5 3	18 18	4 До Firefox для Android 50 стили рамок скругленных углов всегда отображались так, как если бы `border-style` имело значение solid. Эта проблема исправлена в 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-top-right-radius, border-bottom-right-radius и border-bottom-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-left-radius