Css left border line

Содержание

CSS border-left Property
Syntax
Example of the border-left property:
Result
Example of the border-left property applied to different elements:
Example of the border-left property with the element:
Values
Browser support
border-left
Синтаксис
Значения
Объектная модель
Браузеры
border-left
Try it
Constituent properties
Syntax
Values
Formal definition
Formal syntax
Examples
Applying a left border
HTML
CSS
Results
Specifications
Browser compatibility
See also
Found a content problem with this page?
MDN
Support
Our communities
Developers
border-left-style
Объектная модель
Браузеры
CSS по категориям
Селекторы
border-left
Синтаксис
Значения
Объектная модель
Браузеры

CSS border-left Property

The CSS border-left property is used to set the width, line style and color of the left border of elements.

It is a shorthand property for specifying the following values:

These three values of the shorthand property can be specified in any order, and one or two of them can be missed.

If there isn’t a specified color, the value will be taken from the color property. If the color property is not defined, it will take the current color by default.

If the width is not specified, it will take the medium size of the element.

Initial Value	medium none currentColor
Applies to	All elements. It also applies to ::first-letter.
Inherited	No
Animatable	Yes. The color and width of the border are animatable.
Version	CSS1
DOM Syntax	object.style.borderLeft = «1px solid black»;

Syntax

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

Example of the border-left property:

html> html> head> title>Title of the document title> style> div < border-left: 3px solid #1c87c9; padding: 10px; > style> head> body> h2>Border-left example h2> div> This is a simple example for the border-left property. div> body> html>

Result

Example of the border-left property applied to different elements:

html> html> head> style> h1, p, div < padding: 10px; > h1 < border-left: 5px solid #8ebf42; > p < border-left: 4px dotted #1c87c9; > div < border-left: thick double #666; > style> head> body> h1>A heading with a solid green left border h1> p>A heading with a dotted blue left border. p> div>A div element with a thick double left border. div> body> html>

Create a box with the element and set a background-color for your box and left border.

Example of the border-left property with the element:

html> html> head> style> div < border-left: 20px ridge #8ebf42; background-color: #ccc; height: 100px; width: 200px; font-weight: bold; text-align: center; padding: 3px; > style> head> body> div> p>This box has a ridge border on the left side. p> div> body> html>

Values

Value	Description
border-left-width	Sets the left border width of an element. The default value is «medium». Required value.
border-left-style	Sets the line style of the left border of an element. The default value is «none». Required value.
border-left-color	Sets the color of the left border of an element. The default value is the current color of the text.
initial	Sets the property to its default value.
inherit	Inherits the property from its parent element.

Browser support

Источник

border-left

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

Синтаксис

border-left: [border-width || border-style || border-color] | inherit

Значения

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

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

inherit наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

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

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

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

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

Браузеры

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

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

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

Источник

border-left

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

Try it

As with all shorthand properties, border-left 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-left-style: dotted; border-left: thick green;

It is actually the same as this one:

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

The value of border-left-style given before border-left is ignored. Since the default value of border-left-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-left: 1px; border-left: 2px dotted; border-left: medium dashed blue; /* Global values */ border-left: inherit; border-left: initial; border-left: revert; border-left: revert-layer; border-left: 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-left-width : medium
border-left-style : none
border-left-color : currentcolor

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

border-left-color : a color
border-left-style : discrete
border-left-width : a length

Formal syntax

border-left =
||
||

=
|
thin |
medium |
thick

Examples

Applying a left border

HTML

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

CSS

div  border-left: 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

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-left-style

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

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

HTML5 CSS2.1 IE Cr Op Sa Fx

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

Рис. 2. Использование свойства border-left-style

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

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

Браузеры

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

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