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

Значение по умолчанию: none
Применяется к: Все элементы
Наследование: Нет
Анимирование: Нет. Анимируемые свойства
Версия: CSS 1, 2, 3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

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

Примеры написания кода свойства border-top-style:

p {
    border-top-style: dashed;
    border-top-width: 3px;
}

Значения свойств

В следующей таблице описаны значения этого свойства.

Значение Описание
none Граница не будет отображается.
hidden То же, что none, за исключением случая, когда ячейки таблицы имеют border-collapse и две ячейки имеют общую границу. Значение hidden гарантирует, что граница не отображается, поскольку hidden имеет приоритет над всеми другими стилями границ.
dotted Отображает границу в виде серии точек.
dashed Отображает границу в виде серии коротких отрезков, то есть штрихов.
solid Отображает границу одной сплошной линией.
double Отображает границу в виде двух параллельных сплошных линий с некоторым промежутком между ними. Сумма двух строк и пробел между ними равны значению border-width.
groove Отображает границу, как будто она была вырезана на холсте. Это создает впечатление трехмерного изображения, которое обычно достигается созданием тени из двух цветов, которые немного светлее и темнее, чем border-color.
ridge Отображает границу с эффектом, противоположным groove. Это также создает впечатление трехмерности, границы выглядят так, как будто они выходят из холста.
inset Отображает границу, из-за которой элемент выглядит так, как будто он встроен в холст. Это создает впечатление трехмерного изображения, которое обычно достигается созданием тени из двух цветов, которые немного светлее и темнее, чем border-color.
outset Отображает границу, которая имеет эффект, противоположный inset. Это также создает впечатление трехмерности, граница создает вид, как будто он «выходит» из холста.
initial Устанавливает это свойство в значение по умолчанию.
inherit Если указан, связанный элемент принимает вычисленное значение его свойства родительского элемента border-bottom-style.

Поддержка браузеров

Свойство border-top-style поддерживается во всех основных браузерах.

Internet Explorer 7 и более ранние версии не поддерживают значение hidden. IE8 поддерживает, но требует <!DOCTYPE>. IE9 и выше поддерживают значение hidden.

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.