CSS border, примеры. Как сделать рамку (границу) в html

Свойство CSS border слажит для создания границы объекта, а именно за толщину рамки, за ее цвет и стиль. Это свойство широко используется в HTML. Можно создавать различные эффекты для лучшего восприятия контента на странице. Например, оформить сайдбар, шапку сайта, меню и т.п.

Содержание статьи
1. Синтаксис CSS border
2. Примеры с различными границами рамок CSS border
2.1. Пример. Разные стили оформления границы рамки border-style
2.2. Пример. Изменения цвета рамки при наведении курсора мыши
2.3. Пример. Как сделать прозрачную рамку border
3. Толщина границы: свойство border-width
4. Как сделать рамку border только с одного края (с одной границы)
4.1. Пример. Красивая рамка для выделения цитат
5. Как сделать несколько границ border у элемента html
5.1. Первый вариант с несколькими границами
5.2. Наложение теней для создания нескольких границ
6. Скругление углов у границ (border-radius)
7. Вдавленная линия CSS

1. Синтаксис CSS border

border: border-width  border-style  border-color | inherit;

Где:

border-width - толщина рамки. Можно задавать в пикселях (px) или воспользоваться стандартными значениями thin, medium, thick (они отличаются только шириной в пикселях)
border-style - стиль выводимой рамки. Может принимать следующие значения
- none или hidden - отменяет границу
- dotted - рамка из точек
- dashed - рамка из тире
- solid - простая линия (применяется чаще всего)
- double - двойная рамка
- groove - рифленая 3D граница
- ridge, inset, outset - различные 3D эффекты рамки
- inherit - применяется значение родительского элемента
border-color - цвет рамки. Можно задавать с помощью конкретного названия цвета или в формате RGB (см. названия html цветов для сайта)

Примечание

Значения в свойстве CSS border можно задавать в любой последовательности. Чаще всего используют последовательность "толщина стиль цвет".

2. Примеры с различными границами рамок CSS border

2.1. Пример. Разные стили оформления границы рамки border-style

<html>
<head>
<style>
	.border_style_dotted{
	border: 2px dotted #1E90FF;
	padding: 3px;
	margin-bottom: 5px;
	}
	.border_style_dashed{
	border: 2px dashed #1E90FF;
	padding: 3px;
	margin-bottom: 5px;
	}
	.border_style_solid{
	border: 2px solid #1E90FF;
	padding: 3px;
	margin-bottom: 5px;
	}
	.border_style_double{
	border: 2px double #1E90FF;
	padding: 3px;
	margin-bottom: 5px;
	}
	.border_style_groove{
	border: 5px groove #1E90FF;
	padding: 3px;
	margin-bottom: 5px;
	}
	.border_style_ridge{
	border: 5px ridge #1E90FF;
	padding: 3px;
	margin-bottom: 5px;
	}
	.border_style_inset{
	border: 5px inset #1E90FF;
	padding: 3px;
	margin-bottom: 5px;
	}
	.border_style_outset{
	border: 5px outset #1E90FF;
	padding: 3px;
	margin-bottom: 5px;
	}
	.border_complex{
	border-left: 5px solid #1E90FF;
	border-right: 5px dotted #1E90FF;
	border-top: 5px double #1E90FF;
	border-bottom: 5px dashed #1E90FF;
	padding: 3px;
	margin-bottom: 5px;
}
</style>
</head>
<body>
	<div class="border_style_dashed">border-style: dashed</div> 
	<div class="border_style_dashed">border-style: dashed</div> 
	<div class="border_style_solid">border-style: solid</div> 
	<div class="border_style_double">border-style: double</div>
	<div class="border_style_groove">border-style: groove</div> 
	<div class="border_style_ridge">border-style: ridge</div> 
	<div class="border_style_inset">border-style: inset</div> 
	<div class="border_style_outset">border-style: outset</div>
	<div class="border_complex">Четыре разных рамки</div>
</body>
</html>

Вот как это выглядит на странице:

border-style: dotted

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style: outset

Четыре разных рамки

2.2. Пример. Изменения цвета рамки при наведении курсора мыши

Этот пример очень простой, но интересный. Он показывает, как можно использовать псевдокласс :hover и рамку CSS border для создания простых эффектов (например, для меню).

<html>
<head>
<style>
	.border_hover{
	border: 2px solid #1E90FF;
	padding: 5px;
	width: 500px;
	height: 60px;
	}
	.border_hover:hover{
	border: 2px solid #F0F;
	padding: 5px;
	}
</style>
</head>
<body>
	<div class="border_hover">При наведении курсора мыши на блок цвет рамки изменится</div> 
</body>
</html>

Вот как это выглядит на странице:

При наведении курсора мыши на блок цвет рамки изменится

2.3. Пример. Как сделать прозрачную рамку border

Рамку можно сделать прозрачной. Этот эффект редко, но иногда может быть очень полезен для веб-дизайнеров. Для задания прозрачности надо воспользоваться заданием цвета в виде RGBA (R, G, B, P), где последним параметром задается прозрачность (вещественное число от 0.0 до 1.0)

<html>
<head>
<style>
	.opacity_border{
	border: 10px solid rgba(80, 55, 80, 0.5);
	background: url('img/primer-fona.jpg');
	width: 130px;
	height: 116px;
	}
</style>
</head>
<body>
	<div class="opacity_border"></div> 
</body>
</html>

Вот как это выглядит на странице:

3. Толщина границы: свойство border-width

Задает толщину линии. Ранее мы задавали ее в едином описании border.

Синтаксис CSS border-width

border-width: thin | medium | thick | значение;

Где

thin - тонкая толщина линии
medium - средняя толщина линии
thick - толстая толщина линии

Ниже приведены несколько примеров. Самым необычным будет — это разная толщина границы у каждой стороны.

<html>
<head>
<style>
	.border_width_thin{
	border-style: solid;
	border-color: #1E90FF;
	border-width: thin;
	}
	.border_width_medium{
	border-style: solid;
	border-color: #1E90FF;
	border-width: medium;
	}
	.border_width_thick{
	border-style: solid;
	border-color: #1E90FF;
	border-width: thick;
	}
	.border_width{
	border-style: solid;
	border-color: #1E90FF;
	border-width: 1px 2px 3px 4px;
	}
</style>
</head>
<body>
	<div class="border_width_thin">border-width: thin</div> 
	<div class="border_width_medium">border-width: medium</div> 
	<div class="border_width_thick">border-width: thick</div> 
	<div class="border_width">Разная толщина у границ</div> 
</body>
</html>

Вот как это выглядит на странице:

border-width: thin

border-width: medium

border-width: thick

Разная толщина у границ

4. Как сделать рамку border только с одного края (границы)

У свойства CSS border есть производные свойства для задания односторонних границ у элемента:

border-top - для задания рамки сверху (верхняя граница)
border-bottom - для задания рамки снизу (нижняя граница)
border-right - для задания рамки справа (правая граница)
border-left - для задания рамки слева (левая граница)

Эти границы можно совмещать, т.е. прописать для каждого направления свою рамку. Синтаксис точно такой же как и у border.

Также есть свойства

border-top-color - задание цвета верхний границы
border-top-style - задание стиля верхней границы
border-top-width - задание толщины верхней границы
и т.д. для каждого направления

На мой взгляд проще писать все в строчку, чем плодить лишний текст в стилях. Например, следующие свойства будут одинаковыми

/* Описание двух одинаковых стилей:  */
<style>
	.svoystvo1{
	border-top: 1px solid #DEB887; 	
	}
	.svoystvo2{
	border-top-color: #DEB887; 	
	border-top-style: solid; 	
	border-top-width: 1px; 	
	}
</style>

4.1. Пример. Красивая рамка для выделения цитат

<html>
<head>
<style>
	.primer_ramka_citata{
	width: 300px; 
	height: 200px; 
	border: 1px solid #DEB887; 	
	border-left: 2px dashed #006400; 
	background: #EEE8AA; 
	padding: 5px; 
	margin-bottom: 5px; 
	}
</style>
</head>
<body>
	<div class="primer_ramka_citata">Пример рамки для цитаты</div>
</body>
</html>

Вот как это выглядит на странице:

Пример рамки для цитаты

Примечание
Можно задать отдельную границу для каждой из сторон.

5. Как сделать несколько границ border у элемента html

Иногда требуется сделать несколько границ. Приведем пример

5.1. Первый вариант с несколькими границами

<html>
<head>
<style>
	.neskolko_granic {
	width: 200px; 
	height: 200px; 
	position: relative; 
	border: 10px solid orange; 
	}
	.neskolko_granic:after, .neskolko_granic:before {
	content: ''; 
	position: absolute; 
	top: 0;  
	left: 0;  
	bottom: 0;  
	right: 0; 
	}
	.neskolko_granic:after {
	border: 5px solid red; 
	outline: 5px solid yellow; 
	}
	.neskolko_granic:before {
	border: 10px solid green; 
	}
</style>
</head>
<body>
	<div class="neskolko_granic"></div>
</body>
</html>

Вот как это выглядит на странице:

Есть второй способ через наложение теней.

5.2. Наложение теней для создания нескольких границ

<html>
<head>
<style>
	.neskolko_granic_2 {
	border: 5px solid red;
	width: 150px; 
	height: 150px; 
	box-shadow: 
	0 0 0 5px green,
	0 0 0 10px yellow,
	0 0 0 15px orange;
	}
</style>
</head>
<body>
	<div class="neskolko_granic_2"></div>
</body>
</html>

Вот как это выглядит на странице:

6. Скругление углов у границ (border-radius)

Для создания красивых рамок используют свойство CSS border-radius (доступно только в CSS3). С помощью него можно делать скругления углов, что создает совсем другой вид. Например

<div style="width:200px; height:100px; border:3px solid #ae0; border-radius: 10px"></div>

Более подробно про свойство border-radius читайте в отдельной статье: как скруглить углы у рамок в HTML.

7. Вдавленная линия CSS

Вдавленные линии эффектно могут смотреться на темном фоне, что подходит далеко не каждому сайту.

<html>
<head>
<style>
	.vdavlennaya_liniya {
	border: 1px solid #222;
	border-bottom: 1px solid #333;
	}
</style>
</head>
<body>
	<hr class="vdavlennaya_liniya" />
</body>
</html>

Вот как это выглядит на странице:

Для обращения к border из JavaScript нужно писать следующую конструкцию:

[window.]document.getElementById("elementID").style.border="VALUE"

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