Приглашаем посетить

CSS: Границы

Спецификация CSS2 описывает атрибут стиля border, который позволяет задать вид границ вокруг объектов. Атрибут border может быть применен к любым объектам. Могут быть установлены следующие параметры границы:

border-width	Ширина границы. Может быть задана значением в пикселях или с помощью зарезервированных слов thin (тонкая), medium (средняя), thick (толстая). table {border-width: 2px;}
border-color	Цвет границы. Может принимать значение transparent для задания невидимой, но имеющей ширину, границы, что иногда полезно table {border-color: green;}
border-style	Задает стиль рисования границы. Может принимать следующие значения: none (по умолчанию), hidden, dotted, dashed, solid, double,groove, ridge, inset, outset table {border-style: dashed;} table {border-style: groove;}
border-collapse	Задает стиль рисования таблицы. Может принимать следующие значения: separate (по умолчанию) - Ячейки отделены друг от друга collapse - ячейки не имеют промежутков между собой <TABLE STYLE="border-collapse:collapse">

Примечание

Спецификация CSS2 позволяет задать стили для каждой из сторон границы. Например: border-сторона[-атрибут]. Где сторона может принимать следующие значения: top (верхняя граница), bottom (нижняя граница), left (левая граница) и right (правая граница). Таким образом { border-bottom-width: 1px } будет означать, что ширина нижней границы равна 1 пикселу.

Примеры

Пример стиля groove

Верхняя часть заголовка зеленого цвета (dotted)

Верхняя граница окрашена в синий цвет

Пример стиля dashed

Пример стиля double

Граница из двух линий. Сумма ширины каждой линии и промежуток между ними равняется значению border-width.

Пример использования тега DIV

Пример атрибутов
границы элемента DIV

Это обычный вид таблицы	Ячейки отделены друг от друга
Теперь попробуйте щелкнуть мышкой внутри таблицы	Ячейки должны соединиться

<STYLE type="text/css">
table {border-width: 3px;border-color: red;border-style: dashed;}
.gro {border-style: groove;}
</STYLE>

<table class="gro"><tr><td>Пример стиля groove</table>
<br>
<h4 style=border-style:dotted;border-top-color:green;>
Верхняя часть заголовка зеленого цвета (dotted)</h4>


<table style=border-style:dashed;border-top-color:blue;>
<tr>
<td>Верхняя граница окрашена в синий цвет
<td>Пример стиля dashed
</table>
<br>

<table style=border-style:double;>
<tr>
<td>Пример стиля double
<td>Граница из двух линий. Сумма ширины каждой линии и промежуток 
между ними равняется значению border-width.
</table>

<p>Пример использования тега DIV<br>
<DIV STYLE="background: silver; 
     border-style: dashed; 
     border-width: thick;
     border-top-color: red;
     border-right-color: green;
     border-bottom-color: blue;
     border-left-color: yellow;
     ">
Пример атрибутов<br> границы элемента DIV</DIV><br>

<table border=1 onclick="this.style.borderCollapse='collapse'" >
<tr>
<td>Это обычный вид таблицы
<td>Ячейки отделены друг от друга
<tr>
<td>Теперь попробуйте щелкнуть мышкой внутри таблицы
<td>Ячейки должны соединиться
</table>

Вернуться к содержанию