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

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

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

Толщина верхней границы по умолчанию - medium. Она может быть изменена, используя свойство border-top-width или border-width. Браузеры отображают стили по-разному. Например, Chrome отображает не круглые, а прямоугольные точки.

Данная спецификация не устанавливает, каким должно быть расстояние между точками и пунктирами.

Данная спецификация не устанавливает, как соединяются границы разных стилей в углах.

Значение по умолчанию	none
Применяется	Ко всем элементам, а также к ::first-letter.
Наследуется	Нет
Анимируемое	Нет
Версия	CSS1
DOM синтаксис	object.style.borderTopStyle = "dashed";

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2, p {
      padding: 15px;
      border: solid #666; 
      }    
      h2 {
      border-top-style: dashed;
      }
      p {
      border-top-style: dotted;
      }
    </style>
  </head>
  <body>
    <h2>Заголовок с dashed border-top-style.</h2>
    <p>Параграф с dotted border-top-style.</p>
  </body>
</html>

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

Пример, где использованы все значения стилей, чтобы показать их различия.

В зависимости от значения border-color, эффекты значений groove, ridge, inset и outset могут быть изменены.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {
      background: #1c87c9;
      font-size: 20px;
      text-align: center;
      }
      main div {
      display: flex;
      align-items: center;      
      justify-content: center;
      color: black;
      padding-top: 30px;
      padding-bottom: 30px;
      width: 200px;
      height: 100px;
      margin: 15px;
      font-weight: bold;
      background-color: #c9c5c5;
      border: 10px solid;
      }
      .flex-center {
      display: flex;
      justify-content: center;
      }
      /* border-top-style example classes */
      .b1 { border-top-style: hidden; }
      .b2 {border-top-style: dotted;}
      .b3 {border-top-style: dashed;}
      .b4 {border-top-style: solid;}
      .b5 {border-top-style: double;}
      .b6 {border-top-style: groove;}
      .b7 {border-top-style: ridge;}
      .b8 {border-top-style: inset;}
      .b9 {border-top-style: outset;}
    </style>
  </head>
  <body>
    <h2>Примеры значений border-top-style</h2>
    <main class="flex-center">
      <div class="b1">
        hidden
      </div>
      <div  class="b2">
        dotted
      </div>
      <div  class="b3">
        dashed
      </div>
    </main>
    <main class="flex-center">
      <div  class="b4">
        solid
      </div>
      <div class="b5">
        double
      </div>
      <div class="b6">
        groove
      </div>
    </main>
    <main class="flex-center">
      <div class="b7">
        ridge
      </div>
      <div class="b8">
        inset
      </div>
      <div class="b9">
        outset
      </div>
    </main>
  </body>
</html>

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

Значения

Значение	Описание
none	Указывает на отсутствие границы. Значение по умолчанию.
hidden	Имеет тот же эффект, что и none, за исключением применения border-top-style к ячейкам таблицы.
dotted	Точечная граница.
dashed	Пунктирная граница.
double	Двойная граница.
solid	Сплошная граница.
groove	Отображает границы с 3D groove эффектом. Эффект может быть изменен с помощью значения border-color.
ridge	Отображает границы с 3D ridge эффектом. Эффект может быть изменен с помощью значения border-color.
inset	Отображает границы с 3D inset эффектом. Эффект может быть изменен с помощью значения border-color.
outset	Отображает границы с 3D outset эффектом. Эффект может быть изменен с помощью значения border-color.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.