border-left-color в CSS


border-left-color

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

Описание

Задает цвет границы слева от элемента.

Синтаксис

Аргументы

Цвет можно задавать тремя способами.

1. По его названию

Браузеры поддерживают некоторые цвета по их названию.

2. По шестнадцатеричному значению

Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю. Допускается использовать сокращенную форму вида #rgb, где каждый символ следует удваивать. Так, запись #fe0 следует расценивать как #ffee00.

3. С помощью RGB

Можно определить цвет используя значения красной, зеленой и синей составляющей в десятичном исчислении. Значение каждого из трех цветов может принимать значения от 0 до 255. Также можно задавать цвет в процентном отношении.

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

CSS border-left-color Свойство

Пример

Задайте цвет для левой границы:

Подробнее примеры ниже.

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

Свойство border-left-color задает цвет левой границы элемента.

Примечание: Перед свойством всегда объявляйте свойство border-style или Border-left border-left-color . Элемент должен иметь границу, прежде чем можно изменить цвет.

Значение по умолчанию: Текущий цвет элемента
Inherited: no
Animatable: yes. Читайте о animatable
Version: CSS1
Синтаксис JavaScript: object.style.borderLeftColor=»blue»

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

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

Свойство
border-left-color 1.0 4.0 1.0 1.0 3.5

Синтаксис CSS

Значения свойств

Значение Описание
color Задает цвет левой границы. Посмотрите на значения цвета CSS для полного списка возможных значений цвета. Цвет по умолчанию — это цвет элемента
transparent Указывает, что цвет границы должен быть прозрачным
initial Присваивает этому свойству значение по умолчанию. Читайте о initial
inherit Наследует это свойство из родительского элемента. Читайте о inherit

Другие примеры

Пример

Задайте цвет для левой границы с шестнадцатеричным значением:

Пример

Задайте цвет для левой границы со значением RGB:

Пример

Задайте цвет для левой границы со значением RGBA:

Пример

Задайте цвет для левой границы со значением HSL:

Пример

Задайте цвет для левой границы со значением HSLA:

border-left-color

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

Вместо border-left-color можно использовать универсальное свойство CSS border-color.

Тип свойства

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

Значения

Значением свойства CSS border-left-color является указание цвета одним из следующих способов:

  • Имя цвета — Многие цвета имеют имена, которые браузеры понимают, например: red, green, blue.
  • HEX-код цвета — Шестнадцатеричное значение цвета, перед которым ставится знак решетка (#). Каждый HEX-код состоит из трех пар: первая пара отвечает за красный цвет, вторая — за зеленый, третья — за синий, например: #CC9966 или #996699.
  • Цвет в формате RGB — Цвет в десятичном формате, он начинается с аббревиатуры RGB, после которой в скобках, через запятую, указываются три значения. Здесь тоже первое число отвечает за красный цвет, второе — за зеленый, третье — за синий, например: RGB(153, 204, 51).
  • transparent — прозрачный цвет, поэтому сквозь него просвечивает фон родительского элемента.
  • inherit — наследует значение CSS border-left-color от родительского элемента.

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

Значение по умолчанию: совпадает с цветом текста элемента (CSS color).

Синтаксис

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

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

Версии 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 . При значении transparent IE6 не делает рамку прозрачной, а окрашивает ее в серый цвет.

CSS свойство border-left-color

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


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

CSS синтаксис

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

Значение Описание
цвет Устанавливает цвет левой стороны рамки (см. Как использовать цвета).
transparent Значение по умолчанию. Устанавливает, что цвет рамки должен быть прозрачным.
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.

Пример

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

Все о свойстве border

Основы

Всем знакомо такое использование:

Это однопиксельная сплошная рамка. Немного меняем синтаксис:

Например у параметра border-width есть три параметра: thin, medium, thick:

Если необходимо менять цвет границы при наведении на объект:

Но так это реализовать проще и правильнее:

Border-Radius

border-radius — это новый параметр CSS3 для отображения закругленных углов, который корректно работает во всех современных браузерах, за исключением Internet Explorer 8 (и более старых версий).

Для каждого угла можно назначить свое закругление:

В приведенном примере необязательно назначать «0» border-top-right-radius и border-bottom-left-radius, если они не наследуют значения, которые должны быть изменены.
Всю конструкцию можно сжать в одну строку:

А вот как можно нарисовать лимон средствами CSS:

Здесь описаны самые простые и популярные примеры применения параметра border. Перейдем к более сложным.

Несколько границ

Border-Style

solid, dashed, and dotted — самые популярные значения параметра border-style, но давайте рассмотрим другие, например, groove and ridge.

Или более подробно:

Outline

Самый популярный способ создания двойной границы — это параметр outline:

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

Псевдоэлементы

Можно использовать такую конструкцию:

Возможно это не самое элегантное решение, однако оно работает

Box-Shadow

Еще один способ, с применением теней:

Изменение углов

К параметру border-radius можно применять два значения, используя «/», например:

Это то же самое, что:

Эта техничка бывает полезна, если необходимо имитировать искривление, а не закругление. Например, так можно получить эффект скрученной бумаги:

CSS фигуры

В следующих примерах предполагается такая разметка:

И такой базовый css:

Наиболее частым примером использования CSS фигур является отображение стрелок. Чтобы понять, как это работает, необходимо разобраться с использованием отдельного border-color для каждой стороны и установкой значения «0» для width и height:

Или то же самое:

А теперь оставляем только синий треугольник:

Создание Speech Bubble

Наша базовая разметка:

Теперь нужно расположить стрелку-треугольник в нужном месте. Вот наш цветной квадратик:

Оставляем только четверть квадратика:

Теперь перемещаем ниже и закрашиваем:

Вертикальное центрирование текста

минус использования line-height при вертикальном центрировании в ограничении текста одной строкой. Для решения этой проблемы, можно применить display: table к нашему Speech Bubble и display: table-cell к тексту:

Еще один пример нестандартного использования границ:

Свойство CSS border-left-color

p
<
border-style:solid;
border-left-color:#ff0000
>

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

Свойство CSS border-left-color задает цвет левой границы элемента.

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

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

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

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

Заметка: Internet Explorer 6 и более ранние версии не поддерживают значение «transparent» (прозрачный).

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

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

The CSS border-left-color property allows you to set the color of an element’s left border.

You can also use border-color to set the color for all sides of the element, or border-left to set all properties for the left border.

If you use a border without specifying its color, it will use the currentColor value (which is the value of the color property).

The border’s style needs to be specified before it can be displayed. You can use either border-left-style or border-style to specify the border’s style.

Also, the default width of a border is medium . You can specify the width using either the border-left-width or border-width properties.

Syntax

Possible Values

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial Represents the value specified as the property’s initial value. inherit Represents the computed value of the property on the element’s parent. unset This value acts as either inherit or initial , depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

Can I have different colored left and top borders in CSS with straight join?

I would like to have a border that is 4px thick pink on the left and 1px grey elsewhere:

The issue is the join is diagonal so I get a horrible overlay. I tried:

jsFiddle Example

Screenshot

4 Answers 4

.item::before was the right approach, but it needs a bit of work past a single border-left property. You’ll need to make the pseudo element visible ( display: block; content: «»; ), position the pseudo element on the left side of .item , and stretch it to line up with the top and bottom borders properly.

While this can be done manually, I highly recommend using CSS Variables (or variables in your preprocessor) since it makes updating the widths of borders less error-prone and painful.

CSS 2.1 Reference: border-left-color Property

CSS border-left-color Property
  • value is specified by using a color-value or one of the following keywords: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow, transparent or inherit.

The border-left-color property is used to specify the color of the left border. See the Box Model for a description of the boxes that are generated for elements and the relative position of the borders.

This property is specified by using a color-value, or a keyword, according to the syntax shown above.

CSS Example: The border-left-color property is set using the keyword red.

CSS Example: The border-left-color property is set using a RGB 6-Digit Hexadecimal value of #ffa500.

CSS Example: The border-left-color property is set using a RGB Percentage Functional Notation value of rgb(30%,50%,70%).

Илон Маск рекомендует:  Variant - Тип Delphi
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL
Syntax