CSS border-radius. Примеры. Как скруглить углы в HTML через CSS

Практически всем блочным элементам в HTML можно закруглять углы (например, тег <div>, тег <img>, тег <table>). Это делается с помощью свойства CSS border-radius. В этой статье мы рассмотрим все различные варианты.

Синтаксис CSS border-radius:

border-radius: [значение_скругления];

Как скруглить углы в HTML через CSS

Рассмотрим примеры скругления углов через CSS. Например

<html>
<head>
<style>
	.primer1{
	width: 200px;
	height: 100px;
	background: green;
	border-radius: 30px;
	}
</style>
</head>
<body>
	<div class="primer1"></div> 
</body>
</html>

В этом случае все 4 края элемента будут скруглены по 30px.

Значение скругления означает то, какой радиус окружности должен быть в уголке.

Что означают размер скругления углов CSS

Можно скруглять каждый угол с разными радиусами. Для этого нужно написать

border-radius: 10px 7px 0px 0px;

Последовательность этих цифр следующая:

Верхний левый угол (в примере это 10px)
Верхний правый угол (в примере это 7px)
Нижний правый угол (в примере это 0px)
Нижний левый угол (в примере это 0px)

Например

<html>
<head>
<style>
	.primer2{
	width: 200px;
	height: 100px;
	background: green;
	border-radius: 30px 15px 0px 10px;
	}
</style>
</head>
<body>
	<div class="primer2"></div> 
</body>
</html>

Результат:

Чтобы не запоминать какое значение за каким идет можно писать в CSS в отдельности каждый угол

border-top-left-radius: 10px; // верхний левый угол
border-top-right-radius: 7px; // верхний правый угол
border-bottom-right-radius: 0px; // нижний правый угол
border-bottom-left-radius: 0px; // нижний левый угол

Помимо этого, можно также изменять и радиус для каждого угла в отдельности для горизонтальной и вертикальной плоскостей.

Задание второго радиуса нужно задавать через слэш "/" в случае border-radius или вторым значением рядом в случае прямого указания каждого угла радиуса

border-radius: 5px 5px 5px 5px / 10px 10px 10px 10px;
или можно задать так:
border-top-left-radius:5px 10px; // верхний левый угол
border-top-right-radius:5px 10px; // верхний правый угол
border-bottom-right-radius:5px 10px; // нижний правый угол
border-bottom-left-radius:5px 10px; // нижний левый угол

Первый параметр отвечает за горизонтальный радиус, второй за вертикальный.

Например, с помощью этих свойств можно сделать эллипс:

<html>
<head>
<style>
	.primer3{
	width: 200px;
	height: 100px;
	background: green;
	border-radius: 300px 300px 300px 300px / 200px 200px 200px 200px;
	}
</style>
</head>
<body>
	<div class="primer3"></div> 
</body>
</html>

Результат:

Примечание

Значения 100px 100px 100px 100px / 200px 200px 200px 200px можно было бы написать еще компактнее:

border-radius: 100px / 200px;

Изменяя параметры каждого из углов, можно сделать различные интересные скругленные элементы. Например, можно сделать круг, эллипс, каплю, камень, яйцо и т.п.

Задание толщины, цвета и типа линии при скруглении

Помимо значений закруглений можно также задавать толщину, цвет и тип линии скругления. Делаются все эти три параметра через свойство border:

border: [толщина] [тип_линии] [цвет];

Например:

border: 1px solid #00ff00;

Толщина - задается чаще всего в пикселях
Тип линии может принимать значения:
- solid (сплошной)
- dashed (пунктирный)
- dotted (ряд точек)
- groove (линия бороздка)
- inset (вдавленная линия)
- outset (выдавленная линия)
Цвет можно задать либо в формате RGB, либо просто названием (см. коды и названия html цветов)

Приведем пример

<html>
<head>
<style>
	.primer4{
	width: 200px;
	height: 100px;
	border: 3px solid #ae0
	border-radius: 10px;
	}
</style>
</head>
<body>
	<div class="primer4"></div> 
</body>
</html>

Таким образом можно красиво оформлять различные рамки для объявлений, замечаний на сайте.

Свечение для скругления

Помимо задания толщины, цвета и типа линии можно также задавать и свечении рамки. Делается это с помощью свойства box-shadow

box-shadow: 0px 0px 4px 2px #a0b;

Первые два параметра (0px 0px) задают сдвиг тени по горизонтали и вертикали соответственно. Следующие два параметра (4px 2px) задают силу свечения вокруг. Чтобы получилось красиво нужно делать одну цифру больше другой, а вообще надо экспериментировать. Последний параметр - цвет (#a0b).

Например

<html>
<head>
<style>
	.primer5{
	width: 200px;
	height: 100px;
	border: 3px solid #ae0
	box-shadow: 1px 0px 4px 2px #a0b
	border-radius: 10px;
	}
</style>
</head>
<body>
	<div class="primer5"></div> 
</body>
</html>

Результат:

Мы приводили всегда в качестве примеров тег <div>. Но таким же образом можно скруглять и table, img, iframe. Чтобы скруглить края у этих элементов нужно всего лишь в стилях CSS элемента прописать border-radius.

Браузеры
Старые браузеры могут не поддерживать свойство border-radius. Так, IE ниже 9 версии, Firefox ниже 4 не отображают закругления. Необходимо прописывать вендорные префиксы CSS:

-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;

← Перейти в каталог html уроков и советов

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

Как скруглить углы в HTML через CSS

Задание толщины, цвета и типа линии при скруглении

Свечение для скругления