Руководство по CSS

CSS @rules (RULES)

Полный список свойств CSS

Свойство border-top-width в CSS Свойство border-top-right-radius в CSS3

Метод использования и примеры CSS border-top-style

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

В таблице ниже приведены инструкции по использованию и историю версий этого свойства, а также грамматика использования в скриптах JavaScript.

Значение по умолчанию:	none
Для:	Все элементы
Инheritance:	Нет
Анимированный:	Нет.См. также Анимационные свойства.
Версия:	CSS 1, 2, 3
JavaScript грамматика:	object.style.borderTopStyle="dotted"

Грамматика использования border-top-style

Грамматика этого свойства такова:

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, но разница в том, что ячейки таблицы имеютСкладная рамкаи две ячейки делят границу. Значение hidden гарантирует, что рамка не рисуется, так как hidden имеет приоритет перед всеми другими стилями рамки.
dotted	Показывать рамку как серию точек.
dashed	Показывать рамку как серию коротких отрезков, т.е. тире.
solid	Показывать рамку как одну сплошную линию.
double	Показывать рамку как две параллельные сплошные линии, между которыми оставляется определенное расстояние. Общая длина двух линий и расстояние между ними равноborder-widthзначение.
groove	Показывать рамку, вырезанную в канву. Она создает впечатление 3D, обычно достигается созданием тени с помощью цвета, более темного, чем цвет рамки.border-colorСоздается тень из двух более светлых и darker цветов.
ridge	Показывать рамку groove, которая выглядит противоположной по эффекту. Она также создает впечатление 3D, рамка выглядит как будто выступает из канвы.
inset	Показывать рамку, которая делает вид элементов как будто врезанные в канву. Она создает впечатление 3D, обычно достигается созданием тени из двух цветов, более темных, чем цвет рамки.border-colorНемного ярче и darker.
outset	Показывать рамку inset, которая выглядит противоположной по эффекту. Она также создает впечатление 3D, рамка делает коробку, казалось бы, выступающей из канвы.
initial	Установите это свойство в его значение по умолчанию.
inherit	Если указано, то связанный элемент использует значение свойства border-top-style родительского элемента.

Совместимость браузеров

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

	Firefox 1+ Google Chrome 1+ Internet Explorer 4+ Apple Safari 1+ Opera 4+

Внимание: Интернет-Explorer 7 и более ранние версии не поддерживают value hidden. IE8 поддерживает, но需要一个<!DOCTYPE>. Поддержка значения hidden в IE9 и более поздних версиях.

Дополнительное чтение

См. также учебник:CSS Border,CSS3 Border.

См. также свойства:border,border-style,border-top,border-top-color,
border-top-width.

Свойство border-top-width в CSS Свойство border-top-right-radius в CSS3