Вы здесь

CSS свойство border-style

Это свойство определяет стиль всех четырех сторон рамки 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;
}