border-top-width в CSS


CSS border top w >Last update on November 09 2020 06:56:06 (UTC/GMT +8 hours)

border top width property

CSS border-top-width property sets the width of a box’s top border.

Syntax

Values

width: Width of the top border of a box. The following table shows the values :

Value Description
thin A thin border is set if specified
medium A medium border is set if specified.
thick A thick border is set if specified
length You may use em, ex, in(for inches), cm(for centimeters), mm(for millimeters), pt(for points), pc(for picas), px(for pixel).
inherit Specifies that the border width should be inherited from the parent element

inherit: If set, the associated element takes computed value of its parent element’s border-top-width property.

Initial value

Applies to

border-top-width property can be applied to all HTML elements which may form a box.

Inherited

Percentages

Media

Computed value

If the value set to none or hidden, it is 0, else it is an absolute value.

Browser compatibility

Browser Version
Internet Explorer 4.0 and above
Firefox (Gecko) 1.0 and above
Opera 3.5 and above
Safari (WebKit) 1.0 and above

Example of border-top-width property

CSS code:

HTML code:

View this example in a separate browser window

border-top-w > IE Opera Chrome Firefox Safari IE до 7.0 (включ.) не поддерживает значение inherit и hidden + + + +

Пример

Прописываем ширину для верхней границы:

Описание и использование

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

Примечание: Всегда прописывайте свойство border-style перед свойством border-top-width. У элемента должна быть граница, прежде чем менять ее ширину.

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

Это свойство определяет толщину верхней стороны рамки HTML элемента.

Внимание: Следует всегда определять свойство border-style перед свойством border-top-width. Элемент должен иметь рамку, прежде чем менять ее толщину.

CSS синтаксис

Возможные значения

Значение Описание
medium Значение по умолчанию. Средняя толщина рамки.
thin Тонкая рамка.
thick Толстая рамка.
толщина Позволяет устанавливать толщину рамки в единицах измерения (например, в px).
initial Устанавливает значение по умолчанию.
inherit Значение наследуется от родительского элемента.

Пример

Устанавливаем толщину верхней стороны рамки параграфа

border-top-w >

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

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

Тип свойства

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

Значения

Значением свойства border-top-width является указание толщины верхней части рамки в относительных или абсолютных единицах измерения принятых в CSS, например: пиксели (px), пункты (pt), сантиметры (cm) и т.д. При этом отрицательные значения недопустимы. Также значениями могут быть следующие ключевые слова:

  • thin — Тонкая рамка.
  • medium — Средняя рамка.
  • thick — Толстая рамка.
  • inherit — наследует значение border-top-width от родительского элемента.

Процентная запись: не существует.

Значение по умолчанию: medium.

Синтаксис

Пример CSS: использование border-top-width

Результат. Использование свойства CSS border-top-width.

Версии CSS

Версия: CSS 1 CSS 2 CSS 2.1 CSS 3
Поддержка: Да Да Да Да

Браузеры

Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
Версия: 6.0 и 7.0 8.0 и выше 2.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше
Поддержка: Частично Да Да Да Да Да

Internet Explorer 6.0 и 7.0 не понимают значение inherit .

CSS | Свойство border-top-width

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

Синтаксис:

Значения свойств: значения свойств border-top-width перечислены ниже:

  • длина: используется для установки ширины границы. Не принимает отрицательное значение.
  • thin: используется для установки тонкой границы в верхней части элемента.
  • средний: используется для установки верхней границы среднего размера. Это значение по умолчанию.
  • толстый: используется для установки верхней границы.
  • initial: используется для установки значения border-top-width в значение по умолчанию.
  • наследовать: это свойство наследуется от его родителя.

CSS — border-top-width

Description

sets the width of the top border of an element.

Possible Values

length − Any length unit. Length units for this property may not be negative.

thin − A border which is thinner than a border set to medium.

medium − A border which is thicker than a border set to thin, and thinner than a border set to thick.

thick − A border which is thicker than a border set to medium.

Applies to

All the HTML elements.

DOM Syntax

Example

Following is the example to show all the border width −

border-top-width

Браузер Internet Explorer Netтscape Опера Safari Mozilla Firefox
Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Поддерживается Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да

Краткая информация

CSS (ЦСС) CSS (ЦСС)1
Значение по умолчанию medium
Наследуется Нет
Применяется Ко всем элементам
Аналог ШТМЛ |
Ссылка на спецификацию http://www.w3.org/TR/CSS21/box.ШТМЛ#border-width-properties

Описание

Устанавливает толщину границы сверху элемента.

Синтаксис

border-top-width: thin | medium | thick | значение

Аргументы

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

ШТМЛ 4.01 CSS (ЦСС) 2.1 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

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

Рис. 1. Применение параметра border-top-width

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

Свойство border HTML позволяет определять стиль, ширину и цвет границы элемента. Границы элементов могут выполнять как декоративную, так и практическую функцию.

Стиль границы

Свойство border-style позволяет определить тип ( стиль ) границы.

Это свойство принимает разные значения :

  • dotted – граница в точку;
  • dashed – граница в штрих;
  • solid – цельная граница;
  • double – двойная граница;
  • groove – трёхмерная граница. Эффект зависит от того, каким будет значение свойства border-color ;
  • ridge — трёхмерная граница. Эффект зависит от того, каким будет значение свойства border-color ;
  • inset – трёхмерная утопленная граница. Эффект зависит от того, каким будет значение свойства border-color ;
  • outset — трёхмерная выпуклая граница. Эффект зависит от того, каким будет значение свойства border-color ;
  • none – отключение;
  • hidden – скрытые границы.

У свойства HTML border style может быть от одного до четырех значений ( для верхней, правой, нижней и левой стороны ).

Важно! Ни одно из приведенных выше свойств border HTML не вступит в силу, если не установлено значение border-style !

Border Width

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

Ширину можно указывать как в единицах измерения ( px, pt, cm, em и т. д. ), так и с помощью ключевых слов: thin , medium или thick .

У свойства border-width может быть от одного до четырех значений ( для верхней, правой, нижней и левой стороны ).

Border Color

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

Цвет можно указывать несколькими способами :

  • Названием – вписывается название цвета ( например, red );
  • Hex – указывается hex-значение цвета ( например, #FF0000 );
  • RGB – указывается RGB-значение цвета ( например, rgb(255,0,0) );
  • transparent ( прозрачная ).

У свойства border-color может быть от одного до четырех значений ( для верхней, правой, нижней и левой стороны ).

Если не выставить свойство border-color , то границы будут наследовать цвет элемента.

Стилизация границ по-отдельности

В CSS есть свойства border HTML для определения стиля каждой стороны элемента ( top, right, bottom и left ).

Подобного результата можно добиться и следующим методом:

Как это работает

Если у свойства HTML border style будет четыре значения:

  • border-style: dotted solid double dashed ;
  • верхняя граница имеет значение dotted ;
  • правая граница имеет значение solid ;
  • нижняя граница имеет значение double ;
  • левая граница имеет значение dashed .

Если у border-style будет три значения:

  • border-style: dotted solid double ;
  • верхняя граница имеет значение dotted ;
  • правая и левая границы имеют значение solid ;
  • нижняя граница имеет значение double .

Если у border-style будет два значения:

  • border-style: dotted solid ;
  • верхняя и нижняя границы имеют значение dotted ;
  • правая и левая границы имеют значение solid .

Если у HTML border style будет одно значение:

  • border-style: dotted ;
  • то все четыре границы будут иметь значение dotted .

В примерах, приведенных выше, мы использовали свойство border-style . Но учтите, что те же правила применения касаются и border-width , и border-color .

Сокращенное свойство border

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

  • border-width ;
  • border-style ( обязательно );
  • border-color .

Это же свойство можно использовать и для стилизации границ по отдельным сторонам элемента.

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

p
<
border-style:solid;
border-top-width:15px;
>

Описание и использование

Свойство CSS border-top-width задает ширину левого бордюра элемента.

Заметка: всегда задавайте свойство border-style перед свойством border-top-width. Элемент должен иметь бордюры, для которых вы хотите изменить ширину.

Значение по умолчанию medium
Наследование нет
Версия CSS CSS 1
Синтаксис JavaScript object.style.borderTopW

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

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

Заметка: ни одна из версий IE (включая IE8) не поддерживает значение inherit.

CSS border-top-width Property

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

Usages

The following table outline the usages and version history of this property.

Default value: medium
Applies to: All elements
Inherited: No
Version: CSS1
JavaScript Syntax: object.style.borderTopW

Syntax

Here is a syntax for the CSS border-top-width property

Property Values

The following table describes the values of this property.

Value Description
medium Default. Set a medium border
thin Set a thin border
thick Set a thick border
length Set length value in px, pt, cm, em, etc that define border thickness
initial Sets default value of this property
inherit Inherits this property from its parent element

Examples

The example below shows to sets border top width.

Browser Compatibility

  • Google Chrome 1+
  • Mozilla Firefox 1+
  • Internet Explorer 4+
  • Opera 3.5+
  • Safari 1+

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.

Илон Маск рекомендует:  Gdi графика в delphi
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL