CSS border-style Свойство
Пример
Задайте стиль для границы:
div {border-style: dotted;}
Подробнее примеры ниже.
Определение и использование
Свойство border-style
задает стиль четырех границ элемента. Это свойство может иметь от одного до четырех значений.
Примеры:
- border-style: dotted solid double dashed;
- top border is dotted
- right border is solid
- bottom border is double
- left border is dashed
- border-style: dotted solid double;
- top border is dotted
- right and left borders are solid
- bottom border is double
- border-style: dotted solid;
- top and bottom borders are dotted
- right and left borders are solid
- border-style: dotted;
- all four borders are dotted
Значение по умолчанию: | none |
---|---|
Inherited: | no |
Animatable: | no. Читайте о animatable |
Version: | CSS1 |
Синтаксис JavaScript: | object.style.borderStyle="dotted double" |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Свойство | |||||
---|---|---|---|---|---|
border-style | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Примечание: Значение "скрытый" не поддерживается в IE7 и более ранних версиях. IE8 требует! Doctype. IE9 и последующей поддержки "скрытые".
Синтаксис CSS
border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
Значения свойств
Значение | Описание | |
---|---|---|
none | Значение по умолчанию. Не указывает границы | |
hidden | Так же, как "None", за исключением разрешения пограничного конфликта для элементов таблицы | |
dotted | Задает пунктирную границу | |
dashed | Задает пунктирную границу | |
solid | Задает сплошную границу | |
double | Задает двойную границу | |
groove | Задание трехмерной границы с канавкой. Эффект зависит от значения цвета границы | |
ridge | Задание трехмерной ребристой границы. Эффект зависит от значения цвета границы | |
inset | Задает 3D-вставку границы. Эффект зависит от значения цвета границы | |
outset | Задание трехмерной границы начала. Эффект зависит от значения цвета границы | |
initial | Присваивает этому свойству значение по умолчанию. (Читайте о initial) | |
inherit | Наследует это свойство из родительского элемента. (Читайте о inherit) |
Другие примеры
Пример
Пунктирная граница:
div {border-style: dashed;}
Пример
Сплошная граница:
div {border-style: solid;}
Пример
Двойная граница:
div {border-style: double;}
Пример
Граница канавки:
div {
border-style: groove;
border-color: coral;
border-width: 7px;
}
Пример
Граница хребта:
div {
border-style: ridge;
border-color: coral;
border-width: 7px;
}
Пример
Граница вставки:
div {
border-style: inset;
border-color: coral;
border-width: 7px;
}
Пример
Граница начала:
div {
border-style: outset;
border-color: coral;
border-width: 7px;
}
Пример
Задайте различные границы для каждой стороны элемента:
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;}
Похожие страницы
CSS Справочник: CSS Border
HTML DOM Справочник: borderStyle Свойство