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