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

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

Попробуйте

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

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

border-bottom-left-radius: 50%;

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

/* Percentage values */

/* circle if box is a square or ellipse if box is a rectangle */
border-bottom-left-radius: 20%;

/* same as above: 20% of horizontal(width) and vertical(height) */
border-bottom-left-radius: 20% 20%;

/* 20% of horizontal(width) and 10% of vertical(height) */
border-bottom-left-radius: 20% 10%;

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

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

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

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

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

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

Значения

<length-percentage>

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

Описание

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

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

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

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

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

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

Примеры

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

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

<div></div>

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

Дуга эллипса

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

<div></div>

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

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

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

<div></div>

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

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

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

<div></div>

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

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

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

См. также

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