html.okpython.net
HTML и CSS для начинающих

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

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

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

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

Синтаксис

border-radius: <радиус> {1,4} [ / <радиус> {1,4}]

Значения

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

При этом разрешается указывать через пробел одно, два, три или четыре значения:

  • одно значение – скругление задается для всех четырех сторон элемента;
  • два значения – первое значение задает скругление верхней и нижней границы элемента, второе – правой и левой;
  • три значения – первое значение задает скругление верхней границы элемента, второе – правой и левой, третье – нижней границы элемента;
  • четыре значения – скругление границ устанавливается по часовой стрелке: для верхней границы, затем правой, нижней и левой.

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

Ссылки

Примеры

HTML Результат htmlCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>
	
	<style>
		p{
		margin-top: 5em;
		padding: 2em;
		width: 400px;
		min-height: 40px;
		border: solid 15px green;
		}
		
		/* Четыре значения для скругления по окружности */
		.border_1{
		border-radius: 5px 1em 30% 50px;
		}
				
		/* Три значения для скругления по окружности */
		.border_2{
		border-radius: 5px 1em 30%;		
		}
		
		/* Два значения для скругления по окружности */
		.border_3{
		border-radius: 5px 1em;		
		}
		
		/* Одно значение для скругления по окружности */
		.border_4{
		border-radius: 5px;		
		}
		
	</style>
	
</head>
<body>
	<p class="border_1">
		Четыре значения для скругления по окружности<br>
		border-radius: 5px 1em 30% 50px;
	</p>
	
	<p class="border_2">
		Три значения для скругления по окружности<br>
		border-radius: 5px 1em 30%;
	</p>
	
	<p class="border_3">
		Два значения для скругления по окружности<br>
		border-radius: 5px 1em;
	</p>
	
	<p class="border_4">
		Одно значение для скругления по окружности<br>
		border-radius: 5px;
	</p>
		
</body>
</html>

Пример №1

HTML Результат htmlCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<meta name="robots" content="noindex">
	<title>Пример №2</title>
	
	<style>
		p{
		margin-top: 5em;
		padding: 2em;
		width: 400px;
		min-height: 40px;
		border: solid 15px green;
		}
						
		/* Два значения для скругления по эллипсу */
		.border_1{
		border-radius: 10px 20px / 20px 40px;		
		}
		
		/* Одно значение для скругления по эллипсу */
		.border_2{
		border-radius: 20px / 40px;		
		}
		
	</style>
	
</head>
<body>
		
	<p class="border_1">
		Два значения для скругления по эллипсу<br>
		border-radius: 10px 20px / 20px 40px;
	</p>
	
	<p class="border_2">
		Одно значение для скругления по эллипсу<br>
		border-radius: 20px / 40px;	
	</p>
		
</body>
</html>

Пример №2