Пример
Устанавливает стиль четырех границ:<html>
<head>
<meta charset="utf-8" />
<style>
p.none { border-style:none; }
p.dotted { border-style:dotted; }
p.dashed { border-style:dashed; }
p.solid { border-style:solid; }
p.double { border-style:double; }
p.groove { border-style:groove; }
p.ridge { border-style:ridge; }
p.inset { border-style:inset; }
p.outset { border-style:outset; }
</style>
</head>
<body>
<p class="none">Без границы.</p>
<p class="dotted">Граница точками.</p>
<p class="dashed">Граница пунктиром.</p>
<p class="solid">Сплошная граница.</p>
<p class="double">Двойная граница.</p>
<p class="groove">Рельефная граница.</p>
<p class="ridge">Ребристая граница.</p>
<p class="inset">Вставленная граница.</p>
<p class="outset">Выставленная граница.</p>
</body>
</html>
Определение и использование
Свойство border-style устанавливает стиль четырех границ элемента. Свойство может иметь от одного до четырех значений.
Примеры:
- border-style:dotted solid double dashed;
- верхняя граница точками
- правая граница сплошная
- нижняя граница двойная
- левая граница пунктиром
- border-style:dotted solid double;
- верхняя граница точками
- правая и левая граница сплошная
- нижняя граница двойная
- border-style:dotted solid;
- верхняя и нижняя граница точками
- правая и левая граница сплошная
- border-style:dotted;
- все четыре границы точками
| Значение по умолчанию: | не определено |
|---|---|
| Унаследованный: | нет |
| Версия: | CSS1 |
| Синтакс JavaScript: | object.style.borderStyle="dotted double" |
Поддержка браузеров
Свойство border-style поддерживается во всех ведущих браузерах.
Примечание: Ни одна из версий Internet Explorer (включая IE8) не поддерживает значения "inherit" или "hidden".
Значения свойства
| Значение | Описание |
|---|---|
| none | Определяет отсутствие границы |
| hidden | Такой же как "none" |
| dotted | Определяет границу точками |
| dashed | Определяет пунктирную границу |
| solid | Определяет сплошную границу |
| double | Определяет двойную границу. Ширина двойной границы такая же, как значение border-width |
| groove | Определяет 3D рифленые границы. Эффект зависит от значения border-color |
| ridge | Определяет 3D ребристые границы. Эффект зависит от значения border-color |
| inset | Определяет 3D вставленную границу. Эффект зависит от значения border-color |
| outset | Определяет 3D выставленную границу. Эффект зависит от значения border-color |
| inherit | Указывает, что стиль границы должен быть унаследован от родительского элемента |
Больше примеров
Пример
Как установить различные границы для каждой стороны элемента.<html>
<head>
<meta charset="utf-8" />
<style>
p.one {border-style:dotted solid dashed double;}
p.two {border-style:dotted solid dashed;}
p.three {border-style:dotted solid;}
p.four {border-style:dotted;}
</style>
</head>
<body>
<p class="one">Это некоторый текст в параграфе.</p>
<p class="two">Это некоторый текст в параграфе.</p>
<p class="three">Это некоторый текст в параграфе.</p>
<p class="four">Это некоторый текст в параграфе.</p>
</body>
</html>
Была ли эта информация полезной?
