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

css-свойство border-bottom-left-radius (от англ. border bottom left radius – нижний левый радиус границы) используется для скругления нижнего левого угла элемента. При этом border-bottom-left-radius срабатывает и при отсутствии границ, в этом случае происходит скругление фона элемента.

Характеристики

Значение по умолчанию: 0.
Применяется: ко всем элементам, за исключением таблиц с border-collapse: collapse.
Наследуется: нет.
Анимируется: да.
JavaScript: object.style.borderBottomLeftRadius="value".

Синтаксис

border-bottom-left-radius: <радиус>{1,2}

Значения

Любые доступные в CSS единицы измерения (смотреть), а также проценты, отсчет которых производится относительно ширины блока.

Если подразумевается сгругление границ по эллипсу, свойству следует передавать через пробел сразу два радиуса.

Ссылки

Официальный сайт W3C: https://www.w3.org/TR/css-backgrounds-3/#the-border-radius

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/border-bottom-left-radius

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<meta name="robots" content="noindex">
	<title>Пример №1</title>
	
	<style>
		p{
		margin-top: 5em;
		padding: 2em;
		width: 400px;
		min-height: 40px;
		border: solid 15px green;
		}
		
		/* Скругление углов по окружности */
		.border_1{
		border-top-left-radius: 15px;
		border-top-right-radius: 30px;		
		border-bottom-right-radius: 15px;		
		border-bottom-left-radius: 30px;
		}
				
		/* Скругление углов по эллипсу */
		.border_2{
		border-top-left-radius: 1em 2.5em;
		border-top-right-radius: 1em 2.5em;		
		border-bottom-right-radius: 1em 2.5em;		
		border-bottom-left-radius: 1em 2.5em;
		}
		
	</style>
	
</head>
<body>
	
	<p class="border_1">
		Скругление углов по окружности<br>
		border-top-left-radius: 15px;<br>
		border-top-right-radius: 30px;<br>		
		border-bottom-right-radius: 15px;<br>		
		border-bottom-left-radius: 30px;
	</p>
	
	<p class="border_2">
		Скругление углов по эллипсу<br>
		border-top-left-radius: 1em 2.5em;<br>
		border-top-right-radius: 1em 2.5em;<br>		
		border-bottom-right-radius: 1em 2.5em;<br>		
		border-bottom-left-radius: 1em 2.5em;
	</p>
		
</body>
</html>

Пример №1