Это свойство определяет стиль всех четырех сторон рамки HTML элемента. Свойство 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)
CSS синтаксис
border-style: значение{1,4};
Возможные значения
| Значение | Описание |
|---|---|
| none | Значение по умолчанию. Без рамки. |
| hidden | То же, что и none, за исключением разрешения конфликтов с рамками в элементах таблиц. |
| dotted | Рамка состоит из точек. |
| dashed | Рамка состоит из черточек. |
| solid | Сплошная линия. |
| double | Двойная сплошная линия. |
| groove | 3-D рамка, представляющая прорезанный желоб. Эффект зависит от значения свойства border-color. |
| ridge | 3-D рамка, представляющая оттиснутую борозду. Эффект зависит от значения свойства border-color. |
| inset | 3-D рамка, представляющая вдавленное углубление. Эффект зависит от значения свойства border-color. |
| outset | 3-D рамка, представляющая выставленное возвышение. Эффект зависит от значения свойства border-color. |
| initial | Устанавливает значение по умолчанию. |
| inherit | Значение наследуется от родительского элемента. |
Пример использования
Устанавливаем стиль для четырех сторон рамки параграфа
p {
border-style: solid;
}
