border-top-style

CSS border-top-style Property

The border-top-style property sets the style of an element’s top border.

Default value:	none
Inherited:	no
Animatable:	no. Read about animatable
Version:	CSS1
JavaScript syntax:	object.style.borderTopStyle=»dashed» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

Property Values

Value	Description	Demo
none	Specifies no border. This is default	Demo ❯
hidden	The same as «none», except in border conflict resolution for table elements	Demo ❯
dotted	Specifies a dotted border	Demo ❯
dashed	Specifies a dashed border	Demo ❯
solid	Specifies a solid border	Demo ❯
double	Specifies a double border	Demo ❯
groove	Specifies a 3D grooved border. The effect depends on the border-color value	Demo ❯
ridge	Specifies a 3D ridged border. The effect depends on the border-color value	Demo ❯
inset	Specifies a 3D inset border. The effect depends on the border-color value	Demo ❯
outset	Specifies a 3D outset border. The effect depends on the border-color value	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Example

Example

Example

Example

Example

Example

Example

Example

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

border-top-style

The border-top-style CSS property sets the line style of an element’s top border .

Try it

Note: The specification doesn’t define how borders of different styles connect in the corners.

Syntax

/* 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: revert; border-top-style: revert-layer; border-top-style: unset; 

The border-top-style property is specified as a single keyword value.

Formal definition

Formal syntax

border-top-style =

=
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset

Examples

Setting border-top-style

HTML

table> tr> td class="b1">nonetd> td class="b2">hiddentd> td class="b3">dottedtd> td class="b4">dashedtd> tr> tr> td class="b5">solidtd> td class="b6">doubletd> td class="b7">groovetd> td class="b8">ridgetd> tr> tr> td class="b9">insettd> td class="b10">outsettd> tr> table> 

CSS

/* Define look of the table */ table  border-width: 2px; background-color: #52e385; > tr, td  padding: 3px; > /* border-top-style example classes */ .b1  border-top-style: none; > .b2  border-top-style: hidden; > .b3  border-top-style: dotted; > .b4  border-top-style: dashed; > .b5  border-top-style: solid; > .b6  border-top-style: double; > .b7  border-top-style: groove; > .b8  border-top-style: ridge; > .b9  border-top-style: inset; > .b10  border-top-style: outset; > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

• The other style-related border properties: border-left-style , border-right-style , border-bottom-style , and border-style .
• The other top-border-related properties: border-top , border-top-color , and border-top-width .

Found a content problem with this page?

This page was last modified on May 4, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

border-top-style

none Линия не отображается и значение ее толщины обнуляется. hidden Имеет тот же эффект, что и none за исключением применения border-top-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse . В этом случае верхняя граница в ячейке не будет отображаться вообще. dotted Линия состоящая из набора точек. dashed Пунктирная линия, состоящая из серии коротких отрезков. solid Сплошная линия. double Двойная линия. groove Создает эффект вдавленной линии. ridge Создает эффект рельефной линии. inset Псевдотрехмерная линия. outset Псевдотрехмерная линия. inherit Наследует значение родителя.

Вид указанных стилей представлен на рис. 1.

HTML5 CSS2.1 IE Cr Op Sa Fx

       
Lorem ipsum dolor sit amet
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  

Результат данного примера показан на рис. 2.

Рис. 2. Применение свойства border-top-style

Объектная модель

[window.]document.getElementById(» elementID «).style.borderTopStyle

Браузеры

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed . При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed .

Internet Explorer до версии 7.0 включительно не поддерживает значения hidden и inherit .

Стиль границы в разных браузерах может несколько различаться при использовании значений groove , ridge , inset или outset .

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

CSS по категориям

Поля

Анимация

Градиент

Скруглённые уголки

Изображения

Псевдоэлементы

Псевдоклассы

Печать

Контент

Интерфейс

Таблица

Отступы

Список

Текст

Шрифт

Форматирование

Размеры

Позиционирование

Границы

Цвет и фон

Селекторы

• Селекторы тегов
• Идентификаторы
• Классы
• Мультиклассы
• Универсальный селектор
• Вложенные селекторы
• Дочерние селекторы
• Соседние селекторы
• Родственные селекторы
• [атрибут*=»значение»]
• [атрибут~=»значение»]
• [атрибут|=»значение»]
• Селекторы атрибутов
• [атрибут=»значение»]
• [атрибут^=»значение»]
• [атрибут$=»значение»]

Источник

border-top

The border-top shorthand CSS property sets all the properties of an element’s top border.

Try it

As with all shorthand properties, border-top always sets the values of all of the properties that it can set, even if they are not specified. It sets those that are not specified to their default values. Consider the following code:

border-top-style: dotted; border-top: thick green; 

It is actually the same as this one:

border-top-style: dotted; border-top: none thick green; 

The value of border-top-style given before border-top is ignored. Since the default value of border-top-style is none , not specifying the border-style part results in no border.

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

border-top: 1px; border-top: 2px dotted; border-top: medium dashed green; /* Global values */ border-top: inherit; border-top: initial; border-top: revert; border-top: revert-layer; border-top: unset; 

The three values of the shorthand property can be specified in any order, and one or two of them may be omitted.

Values

Formal definition

• border-top-width : medium
• border-top-style : none
• border-top-color : currentcolor

• border-top-width : the absolute length or 0 if border-top-style is none or hidden
• border-top-style : as specified
• border-top-color : computed color

• border-top-color : a color
• border-top-style : discrete
• border-top-width : a length

Formal syntax

border-top =
||
||

=
|
thin |
medium |
thick

=
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset

Examples

Applying a top border

HTML

div>This box has a border on the top side.div> 

CSS

div  border-top: 4px dashed blue; background-color: gold; height: 100px; width: 100px; font-weight: bold; text-align: center; > 

Results

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Feb 21, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник