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>