СSS Свойство border-style
Определение и использование
Свойство border-style задает стиль четырех границ элемента. Это свойство может иметь от одного до четырех значений.
Примеры:
- border-style: dotted solid double dashed;
- верхняя граница пунктирная
- правая граница сплошная
- нижняя граница двойная
- левая граница прочерчена
- border-style: dotted solid double;
- верхняя граница пунктирная
- правая и левая границы сплошные
- нижняя граница двойная
- border-style: dotted solid;
- верхняя и нижняя границы пунктирные
- правая и левая границы сплошные
- border-style: dotted;
- все четыре границы пунктирные
| Значение по умолчанию: | none |
|---|---|
| Унаследованный: | нет |
| Анимируемый: | нет. Прочитать о animatable |
| Версия: | CSS1 |
| JavaScript синтаксис: | object.style.borderStyle="dotted double" Попробовать |
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| border-style | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Примечание: Значение "hidden" не поддерживается в IE7 и более ранних версиях. IE8 требует !DOCTYPE. Поддержка IE9 и более поздних версий "hidden".
CSS Синтаксис
border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
Значение свойств
| Значение | Описание | Воспроизвести |
|---|---|---|
| none | Значение по умолчанию. Определяет границы нет | Воспроизвести » |
| hidden | То же самое, что и "none", за исключением разрешения пограничных конфликтов для элементов таблицы | Воспроизвести » |
| dotted | Указывает пунктирную границу | Воспроизвести » |
| dashed | Указывает пунктирную границу | Воспроизвести » |
| solid | Задает сплошную границу | Воспроизвести » |
| double | Задает двойную границу | Воспроизвести » |
| groove | Задает 3D рифленую границу. Эффект зависит от значения цвета границы | Воспроизвести » |
| ridge | Задает 3D рифленую границу. Эффект зависит от значения цвета границы | Воспроизвести » |
| inset | Задает 3D границу вставки. Эффект зависит от значения цвета границы | Воспроизвести » |
| outset | Задает 3D границу начала. Эффект зависит от значения цвета границы | Воспроизвести » |
| initial | Задает для этого свойства значение индекса. Прочитать о initial | Воспроизвести » |
| inherit | Наследует это свойство от родительского элемента. Прочитать о inherit |
Примеры
Пример
Граница паза:
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
