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

Определение и использование

Свойство border-style используется для установки стиля всех рамок элемента, или отдельно для каждого края рамки.

Отображение рамки возможно только при условии, что это значение не равно 'none'.

Пример 1

border-style:dotted solid double dashed;
  • Верхний край имеет точечный вид
  • Правый край является сплошной линией
  • Нижний край является двойной линией
  • Левый край является пунктирной линией

Пример 2

border-style:dotted solid double;
  • Верхний край имеет точечный вид
  • Правый край и левый край являются сплошными
  • Нижний край является двойной линией

Пример 3

border-style:dotted solid;
  • Верхний край и нижний край имеют точечный вид
  • Правый край и левый край являются сплошными

Пример 4

border-style:dotted;
  • Все 4 края имеют точечный вид

Дополнительная литература:

CSS Уроки:Границы CSS

Руководство по HTML DOM:Атрибут borderStyle

Пример

Установите стиль рамки для всех 4 сторон:

p
  {
  border-style:solid;
  }

Попробуйте сами

CSS синтаксис

border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Значения атрибута

Значения Описание
none Определяет рамку без рамки.
hidden Эквивалент "none". Однако, для таблиц除外, для таблиц используется "hidden", чтобы решить проблему конфликта рамок.
dotted Определяет точечную рамку. В большинстве браузеров呈现ится сплошная линия.
dashed Определяет пунктирную линию. В большинстве браузеров呈现ится сплошная линия.
solid Определяет сплошную линию.
double Определяет двойную линию. Ширина двойной линии равна значению border-width.
groove Определяет 3D впадину рамки. Эффект зависит от значения border-color.
ridge Определяет 3D гребень рамки. Эффект зависит от значения border-color.
inset Определяет 3D врезку рамки. Эффект зависит от значения border-color.
outset Определяет 3D отступ рамки. Эффект зависит от значения border-color.
inherit Указывает, что стиль рамки должен быть получен от родительского элемента.

Описание

Самый непредсказуемый стиль рамки - double. Он определен как ширина двух линий加上 пространство между ними, равное значению border-width. Однако, спецификация CSS не указывает, является ли одна линия толще другой или две линии должны быть одинаковыми по толщине, а также не указывает, должно ли пространство между линиями быть толще линий. Все это решает пользовательский агент, и создатель не имеет никакого влияния на это решение.

Технические детали

Значение по умолчанию: не указано
Ингерит: нет
Версия: CSS1
JavaScript синтаксис: объект.style.borderStyle="пунктирная двойная"

Более примеров

Установка стиля рамки для всех четырех сторон
Этот пример демонстрирует, как установить стиль рамки для всех четырех сторон.
Установка разных рамок для каждого края
Этот пример демонстрирует, как установить разные рамки для каждого края элемента.

Поддержка браузерами

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5