border-top-style¶

Свойство border-top-style устанавливает стиль верхней границы элемента.

Синтаксис¶

/* Keyword values */
border-top-style: none;
border-top-style: hidden;
border-top-style: dotted;
border-top-style: dashed;
border-top-style: solid;
border-top-style: double;
border-top-style: groove;
border-top-style: ridge;
border-top-style: inset;
border-top-style: outset;

/* Global values */
border-top-style: inherit;
border-top-style: initial;
border-top-style: unset;

Значения¶

none: Линия не отображается и значение её толщины обнуляется.
hidden: Имеет тот же эффект, что и none за исключением применения border-top-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse. В этом случае верхняя граница в ячейке не будет отображаться вообще.
dotted: Линия состоящая из набора точек.
dashed: Пунктирная линия, состоящая из серии коротких отрезков.
solid: Сплошная линия.
double: Двойная линия.
groove: Создает эффект вдавленной линии.
ridge: Создает эффект рельефной линии.
inset: Псевдотрёхмерная линия.
outset: Псевдотрёхмерная линия.

Вид указанных стилей представлен на рис. 1.

Рис.1. Стили границ

Значение по-умолчанию: Нет

Применяется ко всем элементам

Спецификации¶

Описание и примеры¶

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>border-top-style</title>
    <style>
      h1 {
        border-top-color: #800000; /* Цвет линии сверху */
        border-top-style: double; /* Стиль линии сверху */
        border-top-width: 7px; /* Толщина линии сверху */
        border-left-color: #bd0000; /* Цвет линии слева */
        border-left-style: solid; /* Стиль линии */
        border-left-width: 2px; /* Толщина линии */
        padding: 7px; /* Поля вокруг текста */
      }
    </style>
  </head>
  <body>
    <h1>Позиционный звукоряд</h1>
    <p>
      Модальное письмо может быть реализовано на основе принципов
      центропостоянности и центропеременности, таким образом процессуальное
      изменение начинает мономерный контрапункт контрастных фактур.
    </p>
  </body>
</html>