css-border-style

08.07.2026
admin
1минут читать

<border-style>

CSS	CSS1
Значение по умолчанию	Нет
Наследуется	Нет
Применяется	Ко всем элементам
Аналог HTML	<img border > \| <table border>
Ссылка на спецификацию	https://www.w3.org/TR/CSS21/box.php#border-style-properties

Описание

Устанавливает стиль рамки вокруг элемента. Допустимо задавать индивидуальные стили для разных сторон элемента.

Синтаксис

border-style: стиль

Аргументы

Для управления видом рамки предоставляется восемь значений параметра border-style. Вид рамки зависит от используемого браузера и заданной толщины границы. В табл. 1 приведены названия стилей и получаемая рамка при разных значениях толщины — 1, 3, 5 и 7 пикселов.

Табл. 1. Вид рамки в зависимости от стиля и толщины границы элемента
1 пиксел	3 пиксела	5 пикселов	7 пикселов
dotted	dotted	dotted	dotted
dashed	dashed	dashed	dashed
solid	solid	solid	solid
double	double	double	double
groove	groove	groove	groove
ridge	ridge	ridge	ridge
inset	inset	inset	inset
outset	outset	outset	outset

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества аргументов и указан в табл. 2.

*Табл. 2. Зависимость результата использования атрибута от числа аргументов*
Число аргументов	Результат
1	Стиль рамки будет задан для всех сторон элемента.
2	Первый аргумент устанавливает стиль верхней и нижней границы, второй аргумент — левой и правой.
3	Первый аргумент задает стиль верхней границы, второй — одновременно левой и правой стороны, а третий — нижней границы.
4	Поочередно устанавливается стиль верхней, правой, нижней и левой границы.

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>border-style</title>
<style type="text/css">
P {
border-style: double; /* Стиль линии вокруг параграфа */
padding: 5px; /* Поля вокруг текста */
}
</style>
</head>
<body>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>

</body>
</html>

Объектная модель

[window.]document.getElementById("elementID").style.borderStyle

Границы, рамки

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

border-bottom позволяет одновременно установить толщину, стиль и цвет границы внизу элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.

border-bottom-color устанавливает цвет границы внизу элемента.

border-bottom-style устанавливает стиль границы внизу элемента.

border-bottom-width задает толщину границы внизу элемента.

border-color устанавливает цвет границы на разных сторонах элемента. Параметр позволяет задать цвет границы сразу на всех сторонах элемента или определить цвет границы только на указанных сторонах.

border-left позволяет одновременно установить толщину, стиль и цвет левой границы элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.

border-left-color задает цвет границы слева от элемента.

border-left-style устанавливает стиль границы слева от элемента.

border-left-width задает толщину границы слева от элемента.

border-right позволяет одновременно установить толщину, стиль и цвет правой границы элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.

border-right-color задает цвет границы справа от элемента. Значение цвета может задаваться по его названию, шестнадцатеричному значению, либо с помощью RGB.

border-right-style устанавливает стиль границы справа от элемента.

border-right-width устанавливает толщину границы справа от элемента.

border-style устанавливает стиль рамки вокруг элемента. Допустимо задавать индивидуальные стили для разных сторон элемента.

border-top-color задает цвет границы сверху элемента.

border-top-style устанавливает стиль границы сверху элемента.

border-top-width устанавливает толщину границы сверху элемента.

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

border-top одновременно задает толщину, стиль и цвет границы сверху элемента.