border-top-style в CSS


CSS :: Свойство border-top-style

css -свойство border-top-style (от англ. top border style – стиль верхней границы) используется для установки стиля верхней границы элемента.

Характеристики

  • Значение по умолчанию: none .
  • Применяется: ко всем элементам .
  • Наследуется: нет .
  • Анимируется: нет .
  • JavaScript: object.style.borderTopStyle=»value» .

Синтаксис

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

border-top-style

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

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

Тип свойства

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

Значения

Значением свойства border-top-style являются ключевые слова задающие стиль рамки.

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

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

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

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

По одной стороне рамки тяжело понять ее внешний вид, для этого лучше посмотреть свойство border-style, где показаны стили рамок со всеми сторонами.

Синтаксис

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

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

Версии 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 и hidden .

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 определяет ширину границы по любой из четырех сторон элемента.

Илон Маск рекомендует:  Что такое код linerel

Ширину можно указывать как в единицах измерения ( 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 .

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

Блог Vaden Pro

  • 15 просмотров

Характеристики свойства

В каких браузерах работает?

8.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

В каких версиях CSS используется?

CSS 1 CSS 2 CSS 2.1 CSS 3
+ + +

Для чего используется?

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

Как правильно задавать?

Какие могут быть значения?

  • none — убирает рамки из вывода.
  • hidden — соответствует функциям значения none, но применяется только для таблиц.
  • dotted — линия рамки представлена точками.
  • dashed — граница представлена пунктирной полосой.
  • solid — обычная не прерывистая линия.
  • double — рамка представлена двумя тонкими параллельными полосами.
  • groove — представляет трехмерный эффект вдавленной рамки.
  • ridge — представляет трехмерный эффект выпуклой рамки.
  • inset — эффект объемной линии в двухмерном формате.
  • outset — эффект объемной линии в двухмерном формате.
  • inherit — повторяет рамку родительского элемента

Наглядный пример использования различных видов рамок:

dotted dashed solid double groove ridge inset outset

Наибольшее распространение на практике получили двухмерные линии, однако довольно часто используются объемные рамки для создания эффекта трехмерной кнопки, которая, к примеру, отвечает за выплывание формы обратной связи. Такой прием очень популярен при создании Landing Page.

CSS border-top-style Property

Description

The border-top-style CSS property sets the style of an element’s top border individually. However in many cases the shorthand CSS properties like border-style or border-top are more convenient to use and preferable.

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

Default value: none
Applies to: All elements
Inherited: No
Animatable: No. See animatable properties.
Version: CSS 1, 2, 3
Илон Маск рекомендует:  Операции инкрементадекремента

Syntax

The syntax of the property is given with:

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

The example below shows the border-top-style property in action.

Example

  • p <
  • border-top-style : dashed ;
  • border-top-width : 3px ;
  • >

Property Values

The following table describes the values of this property.

Value Description
none No border will be displayed.
hidden Same as none , except the case where table cells have collapsed borders and the two cells share a border. The hidden value ensures that no border is drawn, since hidden take precedence over all other border styles.
dotted Displays the border as a series of dots.
dashed Displays the border as a series of short line segments i.e. dashes.
solid Displays the border as a single solid line.
double Displays the border as a two parallel solid lines with some space between them. The sum of the two lines and the space between them equals the value of border-width .
groove Displays the border as it were carved into the canvas. It gives the impression of 3D that is typically achieved by creating a shadow from two colors that are slightly lighter and darker than the border-color .
ridge Displays the border that has the opposite effect of groove . It also gives the impression of 3D, the border looks as though it were coming out of the canvas.
inset Displays the border that makes the element’s box look as though it were embedded in the canvas. It gives the impression of 3D that is typically achieved by creating a shadow from two colors that are slightly lighter and darker than the border-color .
outset Displays the border that has the opposite effect of inset . It also gives the impression of 3D, the border makes the box look as though it were coming out of the canvas.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element border-top-style property.

Browser Compatibility

The border-top-style property is supported in all major modern browsers.

Basic Support—

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

Warning: Internet Explorer 7 and earlier versions don’t support the value hidden . IE8 supports, but requires a . IE9 and above supports the hidden value.

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

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

CSS синтаксис

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

Значение Описание
none Значение по умолчанию. Без рамки.
hidden То же, что и none, за исключением разрешения конфликтов с рамками в элементах таблиц.
dotted Рамка состоит из точек.
dashed Рамка состоит из черточек.d>
solid Сплошная линия.
double Двойная сплошная линия.
groove 3-D рамка, представляющая прорезанный желоб. Эффект зависит от значения свойства border-color.
ridge 3-D рамка, представляющая оттиснутую борозду. Эффект зависит от значения свойства border-color.
inset 3-D рамка, представляющая вдавленное углубление. Эффект зависит от значения свойства border-color.
outset 3-D рамка, представляющая выставленное возвышение. Эффект зависит от значения свойства border-color.
initial Устанавливает значение по умолчанию.
inherit Значение наследуется от родительского элемента.

Пример

Устанавливаем стиль для верхней стороны рамки параграфа

CSS border-top-style property

border-top-style property

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

Syntax:

Values

style: Style of the top border of a box. The following table shows the values :

value Description
none No style is set. The width of the border is zero.
hidden No style is set. The width of the border is zero, except border of table elements (e.g. td, tr).
dotted Border is a chain of dots.
dashed Border is a chain of small dashes.
solid The border is made up of a single line segment.
double The border is made up of a two line segments. In this case, the width of the border is calculated by summing up the width of the lines and the space between two lines.
groove As if the border is carved.
ridge As if the border is coming out of the medium on which it is displayed.
inset As if the box is embedded.
inset As if the box is carved.

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

Initial value

Applies to

border-top-style property can be applied to all HTML elements.

Inherited

Percentages

Media

Computed 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-style property

CSS code:

HTML code:

View this example in a separate browser window

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

p
<
border-style:solid;
border-top-style:dotted;
>

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

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

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

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

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

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

border-top-style

Браузер 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
Значение по умолчанию Нет
Наследуется Нет
Применяется Ко всем элементам
Аналог ШТМЛ |
Ссылка на спецификацию http://www.w3.org/TR/CSS21/box.ШТМЛ#border-style-properties

Описание

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

Синтаксис

Аргументы

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

Рис.1. Стили рамок

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

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

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

CSS border-top-style Property

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

Usages

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

Default value: none
Applies to: All elements
Inherited: No
Version: CSS1
JavaScript Syntax: object.style.borderTopStyle = «double»

Syntax

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

Property Values

The following table describes the values of this property.

Value Description
none Default. Displays no border.
hidden same as none , except table cells border conflict resolution
dotted Displays the border as a series of rounded dots
dashed Displays the border as a series of short square dashes
solid Displays the border as a single solid line
double Displays the border as a two parallel solid lines with some space between them equals the value of border-width.
groove Displays the border as a grooved border. It’s depend border-color value to creating shadow from two colors that are slightly lighter and darker than the border-color
ridge Displays the border as a r >groove effect.
inset Displays the border as a inset border, it’s look as though it were embedded in the canvas. It’s depend border-color value to creating shadow from two colors that are slightly lighter and darker than the border-color
outset Displays the border as a outset border that is opposite of inset effect.
initial Sets default value of this property
inherit Inherits this property from its parent element.

Examples

The example below shows to sets border top style.

Browser Compatibility

  • Google Chrome 1+
  • Mozilla Firefox 1+
  • Internet Explorer 4+
  • Opera 4+
  • 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.

Илон Маск рекомендует:  Язык xml dom совместимые анализаторы
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL