CSS border-bottom-left-radius — нижній лівий кут

Властивість border-bottom-left-radius встановлює радіус округлення нижнього лівого кута кордону. Якщо кордони не задані, то округллюється фон.

Властивість border-bottom-left-radius може бути використана разом з border (або будь-якої іншою властивістю, яка стилізує межі елементу) для того, щоб встановити межу, вона також може бути використана без задання інших спеціальних стилів для рамки.

За допомогою border-radius можна встановити округлення для всіх кутів відразу.

Округлення може бути кругом або еліпсом, або якщо одне зі значення дорівнює 0, округлення не відбудеться й кут зостанеться квадратним.

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

правити

Загальний опис

правити

Нотатка

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

автор: Svitlana правити

Нотатка

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

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

border-bottom-left-radius: length|% [length|%]|initial|inherit;

Властивість border-bottom-left-radius може отримувати 4 значень:

length

Визначає форму кута. Значення без задання дорівнює 0

автор: Svitlana

правити

%

Визначає форму кута у %

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	4	4	5	10.5	12	9
відсотки	4.0	4.0	5.0	10.5		9.0
еліптичні куточки	1.0	3.5	3.0	10.5		9.0

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	4.2
відсотки	2.1		4.0	5.0
еліптичні куточки	2.1		3.5	3.0

Приклади

+ запропонувати свій приклад у пісочниці

<div>Заокруглений тільки нижній лівий кут.</div>

div {
    border: 2px solid;
    border-bottom-left-radius: 2em;
    padding: 12px;
}

<div class="row">
    <div class="card bottom">border-radius: 0 0 20px 20px</div>
    <div class="card one">border-bottom-left-radius: 40px</div>
    <div class="card ellipse">border-bottom-left-radius: 60px 15px</div>
</div>

body {
    font-family: monospace;
    font-size: 12px;
    padding: 16px;
}

.row {
    display: flex;
    gap: 16px;
}

.card {
    width: 170px;
    height: 110px;
    padding: 10px;
    background: rgba(255, 215, 0, .55);
    border: 3px solid #c9a227;
}

.bottom {
    border-radius: 0 0 20px 20px;
}

.one {
    border-bottom-left-radius: 40px;
}

.ellipse {
    border-bottom-left-radius: 60px 15px;
}

<div class="box">

<p>У цьому прикладі, Ви можете змінювати значення для властивості <strong>border-bottom-left-radius</strong>.</p>

<p>Вона встановлює заокруглення для нижнього лівого кута кордону елемента на сторінці.</p>

<strong>border-bottom-left-radius: </strong>
<input type="number" class="input" id="num" value="12">px
<strong>;</strong>
  
</div>

* {
  box-sizing: border-box;
}

body {
  font-family: monospace;
  font-size: 16px;
  line-height: 1.45;
  height: 100vh;
  padding: 16px;
}

.box {
  background-color: #f7f7f7;
  padding: 16px;
  border: 8px solid #F74C32;
  border-bottom-left-radius: 12px;
}

.input {
  margin-bottom: 36px;
  width: 75px;
}

#select {
  position: relative;
  top: -4px;
  width: 100px;
}

document.querySelectorAll('.input').forEach((el) => el.addEventListener('change', function () {
  var num = document.querySelector('#num').value;
  document.querySelectorAll('.box').forEach((n) => n.style.setProperty('border-bottom-left-radius', num + 'px'));
}));

<div class="info">
	<p>За допомогою властивості <code>border-bottom-left-radius</code> ми можемо заокруглити лівий нижній кут кордону елемента.</p>
	<p>Ви бачите три блоки з ідентичним загальним кордоном, але два останніх мають заокруглений кут.</p>
</div>

<div class="wrapper">
	<div class="block"></div>
	<div class="block proc"></div>
	<div class="block px"></div>
</div>

* {
	box-sizing: border-box;
}

body {
	font-family: monospace;
	font-size: 17px;
	line-height: 1.45;
}

.info {
	padding: 4px 16px 8px 16px;
}

code {
	font-weight: 700;
	color: #444;
	border-bottom: 2px solid #666;
}

.wrapper {
	display: flex;
	justify-content: space-around;
}

.block {
	width: 150px;
	height: 150px;
	background-color: gold;
	border: 16px solid #444;
}

.block.proc {
	border-bottom-left-radius: 45%;
}

.block.px {
	border-bottom-left-radius: 40px;
}

<div class="block">
  <p>Як бачимо, фонове зображення округлилося разом із межею...</p>
</div>

.block {
  width: 650px;
  height: 450px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='940' height='650' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23e9c46a'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23264653'/%3E%3C/svg%3E") center center no-repeat;
  background-size: cover;
  
  border: 10px solid #444;
  border-bottom-left-radius: 50%;
  
  font-family: sans-serif;
  font-size: 18px;
  color: #000;
  font-weight: 700;
  padding-top: 65px;
  box-sizing: border-box;
  text-align: right;
}