border-top в CSS


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

Свойство border-top-style определяет стиль верхней границы блока. Стиль верхней границы рамки, по умолчанию, не наследуется и считается невидимым. Стиль может принимать любое значение в соответствии со стандартом CSS 2.1 или CSS 3, либо значением inherit.

Доступные стили:

Для стилей groove, ridge, inset, outset в спецификации не утвержден метод расчета цвета, поэтому в разных браузера, рамки с такими стилями могут немного визуально отличаться (см. border-style — примеры). Так же в спецификации не обсуждается размер точек, штрихов и промежутков между ними для стилей dotted и dashed, рекомендуется только выбирать такие размеры, чтобы углы рамки смотрелись симметрично, кроме этого в браузерах на движках Trident (Internet Explorer) и Gecko (Firefox) стиль dotted отображается кружками, а в браузерах на движках WebKit (Chrome,Safari) и Presto (Opera) квадратиками.

Специфические стили:

Данные стили доступны только в определенных версиях браузеров и не являются часть стандарта CSS.

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

Свойство 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 может быть от одного до четырех значений ( для верхней, правой, нижней и левой стороны ).

Илон Маск рекомендует:  Как пронумеровать страницы в Word

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 property

This CSS tutorial explains how to use the CSS property called border-top with syntax and examples.

Description

The CSS border-top property defines the width, line style, and color of the top border of a box. It is a shorthand property for setting the border-top-width, border-top-style, and border-top-color CSS properties.

Syntax

The syntax for the border-top CSS property is:

Parameters or Arguments

border-top-width is the top border width of a box and can be one of the following:
(If border-top-width is not provided, the default is medium)

Value Description
fixed Fixed value expressed in px, em, .
div
thin Thin border-top width, which might be 1px or 2px depending on the browser
div
medium Medium border-top width, which might be 3px or 4px depending on the browser
div
thick Thick border-top width, which might be 5px or 6px depending on the browser
div

border-top-style is the line style of the top border of a box and can be one of the following:
(If border-top-style is not provided, the default is none)

Value Description
none No border-top (This is the default)
div
solid Single, straight, solid line
div
dotted Series of dots
div
dashed Series of short dashes
div
double Two straight lines that total the pixel amount defined by border-top-width
div
groove Carved effect
div
ridge 3D appearance where border-top looks like it is «coming out» (opposite of groove)
div
inset Embedded appearance
div
outset Embossed appearance (opposite of inset)
div
hidden Border is hidden
div
inherit Element will inherit the border-top-style from its parent element
div

border-top-color is the color of the top border of a box and can be one of the following:

Value Description
#RRGGBB Hexadecimal representation of the border-top-color
div
rgb() RGB representation of the border-top-color
div
name Name of the border-top-color (ie: red, blue, black, white)
div
transparent Border is not displayed but still takes up space on the page
div
inherit Element will inherit the border-top-color from its parent element
div
  • When using the border-top property, you can provide one or all of the values (border-top-width, border-top-style, and border-top-width values) and they can be provided in any order.
  • You must provide a value for the border-top-style for the top border to appear.
  • See also the border-top-color, border-top-style, and border-top-width properties.
  • Need to convert your color value to a different representation? Try this online tool to convert your color value between hexadecimal and RGB.

Browser Compatibility

The CSS border-top property has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • IE Phone
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the border-top property below, exploring examples of how to use this property in CSS.

In this CSS border-top example, we have set the line style of the top border to solid. You must set the style for the top border or the top border will not appear.

Next, we’ll look at a CSS border-top example where we provide the border-top-width, border-top-style, and border-top-color values.


In this CSS border-top example, we have set the border-top-width to 2px, the border-top-style to solid, and the border-top-color to red.

We could rewrite this example using the hexadecimal value for red as follows:

Or we could rewrite this example using the rgb() value for red as follows:

свойство border-topCSS3-генератор ☛

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

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

Значение по умолчанию Зависит от использования
Наследуется Нет
Применяется Ко всем элементам
Анимируется Да

Синтаксис ?

Обозначения

Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [, ]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

Значения

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

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

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

Пример

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

Примечание

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

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

Спецификация ?

Спецификация Статус
CSS Backgrounds and Borders Module Level 3 Возможная рекомендация
CSS Level 2 (Revision 1) Рекомендация
CSS Level 1 Рекомендация

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры: Настольные Мобильные ?

Internet Explorer Chrome Opera Safari Firefox
4 7 1 3.5 1 1
Android Firefox Mobile Opera Mobile Safari Mobile
1 1 6 1

Браузеры

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

border-top

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

IE Opera Chrome Firefox Safari
IE до 7.0 (включ.) не поддерживает значение inherit. IE6 не поддерживает transparent + + + +

Пример

Задаем стиль для верхней границы:

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

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

Свойства, которые можно задать (по порядку): border-top-width, border-top-style, and border-top-color.

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

border-top

Браузер 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-shorthand-properties

Описание

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

Синтаксис

border-top: border-width || border-style || color

Аргументы

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

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

Первые два стиля — dotted и dashed поддерживаются браузером Internet Эксплорер с версии 5.5.

Аргумент color устанавливает цвет рамки, значение может быть в любом допустимом для CSS (ЦСС) формате.

ШТМЛ 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.

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

Свойство CSS border слажит для создания границы объекта, а именно за толщину рамки, за ее цвет и стиль. Это свойство широко используется в HTML. Можно создавать различные эффекты для лучшего восприятия контента на странице. Например, оформить сайдбар, шапку сайта, меню и т.п.

1. Синтаксис CSS border

  • border-width — толщина рамки. Можно задавать в пикселях (px) или воспользоваться стандартными значениями thin, medium, thick (они отличаются только шириной в пикселях)
  • border-style — стиль выводимой рамки. Может принимать следующие значения
    • none или hidden — отменяет границу
    • dotted — рамка из точек
    • dashed — рамка из тире
    • solid — простая линия (применяется чаще всего)
    • double — двойная рамка
    • groove — рифленая 3D граница
    • ridge , inset , outset — различные 3D эффекты рамки
    • inherit — применяется значение родительского элемента
  • border-color — цвет рамки. Можно задавать с помощью конкретного названия цвета или в формате RGB (см. названия html цветов для сайта)

Примечание

Значения в свойстве CSS border можно задавать в любой последовательности. Чаще всего используют последовательность «толщина стиль цвет».

Блог 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.

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