Css border top weight

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

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

Эти три значения сокращенного свойства могут быть установлены в любом порядке, или же одно или две значения могут быть пропущены. Если цвет не установлен, значение будет выбрано из свойства color. Если свойство color не установлено, будет выбран черный цвет по умолчанию. Если свойство width не установлено, будет выбран средний размер элемента.

Значение по умолчанию	medium none currentColor
Применяется	Ко всем элементам, а также к ::first-letter.
Наследуется	Нет
Анимируемое	Да. Толщина и цвет границы анимируемы.
Версия	CSS1
DOM синтаксис	object.style.borderTop = «1px solid black»;

Синтаксис

border-top: border-width border-style border-color | initial | inherit;

Пример

html> html> head> title>Заголовок документа title> style> div < border-top: 3px solid #1c87c9; padding: 10px; > style> head> body> h2> Пример border-top h2> div> Пример свойства border-top. div> body> html>

Свойство border-top может быть применен к разным элементам.

Пример

html> html> head> style> h1, p, div < padding: 10px; > h1 < border-top: 5px solid #8ebf42; > p < border-top: 4px dotted #1c87c9; > div < border-top: thick double #666; > style> head> body> h1>Заголовок с верхней границей solid green h1> p>Заголовок с верхней границей dotted blue. p> div>div элемент с верхней границей thick double. div> body> html>

Можно создать блок с элементом, установить background-color для блока и установить верхнюю границу.

Пример

html> html> head> style> div < border-top: 20px ridge #8ebf42; background-color: #ccc; height: 100px; width: 200px; font-weight: bold; text-align: center; padding: 3px; > style> head> body> div> p>Блок сверху имеет границу ridge. p> div> body> html>

Значения

Значение	Описание
border-top-width	Устанавливает толщину верхней границы элемента. Значение по умолчанию — «medium». Необходимое значение.
border-top-style	Устанавливает стиль линии верхней границы элемента. Значение по умолчанию — «none». Необходимое значение.
border-top-color	Устанавливает цвет верхней границы элемента. Значение по умолчанию — текущий цвет текста.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.

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

Источник

border-top-width

The border-top-width CSS property sets the width of the top border of an element.

Try it

Syntax

/* Keyword values */ border-top-width: thin; border-top-width: medium; border-top-width: thick; /* values */ border-top-width: 10em; border-top-width: 3vmax; border-top-width: 6px; /* Global keywords */ border-top-width: inherit; border-top-width: initial; border-top-width: revert; border-top-width: revert-layer; border-top-width: unset; 

Values

Defines the width of the border, either as an explicit nonnegative or a keyword. If it’s a keyword, it must be one of the following values:

Note: Because the specification doesn’t define the exact thickness denoted by each keyword, the precise result when using one of them is implementation-specific. Nevertheless, they always follow the pattern thin ≤ medium ≤ thick , and the values are constant within a single document.

Formal definition

Initial value	medium
Applies to	all elements. It also applies to ::first-letter .
Inherited	no
Computed value	the absolute length or 0 if border-top-style is none or hidden
Animation type	a length

Formal syntax

Источник

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.

Источник

border-top-width¶

Свойство border-top-width устанавливает толщину границы сверху элемента.

Демо¶

• border
• border-bottom
• border-bottom-color
• border-bottom-left-radius
• border-bottom-right-radius
• border-bottom-style
• border-bottom-width
• border-collapse
• border-color
• border-image
• border-image-outset
• border-image-repeat
• border-image-slice
• border-image-source
• border-image-width
• border-left
• border-left-color
• border-left-style
• border-left-width
• border-radius
• border-right
• border-right-color
• border-right-style
• border-right-width
• border-style
• border-top
• border-top-color
• border-top-left-radius
• border-top-right-radius
• border-top-style
• border-top-width
• border-width
• box-shadow

Синтаксис¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14

/* Keyword values */ border-top-width: thin; border-top-width: medium; border-top-width: thick; /* values */ border-top-width: 10em; border-top-width: 3vmax; border-top-width: 6px; /* Global keywords */ border-top-width: inherit; border-top-width: initial; border-top-width: unset; 

Значения¶

Три переменные — thin (2 пикселя), medium (4 пикселя) и thick (6 пикселей) задают толщину границы. Для более точного значения, толщину можно указывать в пикселях или других единицах.

Применяется к: Ко всем элементам

Спецификации¶

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

 html> head> meta charset="utf-8" /> title>border-top-widthtitle> style> h1  border-top-color: green; /* Цвет линии сверху */ border-top-style: double; /* Стиль линии сверху */ border-top-width: 7px; /* Толщина линии сверху */ border-right-color: green; /* Цвет линии справа */ border-right-style: double; /* Стиль линии */ border-right-width: 5px; /* Толщина линии */ padding: 7px; /* Поля вокруг текста */ color: #f9b61c; /* Цвет текста */ > style> head> body> h1>Нечётный хамбакерh1> p> Гипнотический рифф mezzo forte просветляет целотоновый хамбакер. p> body> html> 

Источник

border-top¶

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

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

Демо¶

• border
• border-bottom
• border-bottom-color
• border-bottom-left-radius
• border-bottom-right-radius
• border-bottom-style
• border-bottom-width
• border-collapse
• border-color
• border-image
• border-image-outset
• border-image-repeat
• border-image-slice
• border-image-source
• border-image-width
• border-left
• border-left-color
• border-left-style
• border-left-width
• border-radius
• border-right
• border-right-color
• border-right-style
• border-right-width
• border-style
• border-top
• border-top-color
• border-top-left-radius
• border-top-right-radius
• border-top-style
• border-top-width
• border-width
• box-shadow

Синтаксис¶

border-top: 1px; border-top: 2px dotted; border-top: medium dashed green; 

Значения¶

border-top-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-top-style . Их названия и результат действия представлен на рис. 1.

border-top-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.

Значение по-умолчанию: Зависит от использования

Применяется ко всем элементам

Спецификации¶

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

 html> head> meta charset="utf-8" /> title>border-toptitle> style> blockquote  border-top: 2px solid #95cd8b; /* Линия сверху текста */ border-bottom: 2px solid #95cd8b; /* Линия снизу текста */ padding: 5px; /* Поля вокруг текста */ > style> head> body> blockquote> Наибольшее и наименьшее значения функции усиливает многомерный Наибольший Общий Делитель (НОД). blockquote> body> html> 

Источник