Стиль линии рамки

С помощью атрибутов border-left-style (левая линия), border-right-style (правая линия), border-top-style (верхняя линия) и border-bottom-style (нижняя линия) можно задать тип линии рамки. Могут принимать следующие значения:

• none — линия не отображается;
• solid — линия отображается сплошной линией;
• dotted — пунктирная линия;
• dashed — штриховая линия;
• double — линия отображается в виде двойной линии;
• groove — вдавленная рельефная линия;
• ridge — выпуклая рельефная линия;
• inset — весь блок элемента отображается, как будто он вдавлен в лист;
• outset — весь блок элемента отображается, как будто выдавлен из листа.

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

< html>
< head>
< meta http-equiv=" Content-Type" content=" text/html; charset=UTF-8" >
< title> Тип рамки< /title>
< style type=" text/css" >
table { border-left-style: dashed; border-right-style: dotted; border-top-style: solid; border-bottom-style: groove }
td { border-left-style: none; border-right-style: none; border-top-style: none; border-bottom-style: none; text-align: center }
caption { border-top-style: solid }
p { border-left-style: dotted; border-right-style: dotted; border-top-style: dotted; border-bottom-style: dotted }
< /style>
< /head>

< body>
< table width=" 300" align=" center" >
< caption> Заголовок таблицы < /caption>
< tr>
< td> 1< /td>
< td> 2< /td>
< /tr>
< tr>
< td> 3< /td>
< td> 4< /td>
< /tr>
< /table>
< p> Текст в пунктирной рамке< /p>
< /body>
< /html>

В окне веб-браузера это будет выглядеть ТАК.

Этот пример показывает, что указать тип рамки можно не только для границ таблицы, но и для заголовка таблицы, и даже для абзацев.

Эти атрибуты могут быть объединены в одном атрибуте border-style:

border-style: < top> < right> < bottom> < left>

Если все значения совпадают, можно указать это значение один раз:

table { border-style: dotted }