Перейти к содержанию

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>