border-bottom-color в CSS

border-bottom-color

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

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

Тип свойства

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

Значения

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

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

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

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

Синтаксис

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

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

Версии CSS

Браузеры

Internet Explorer 6.0 и 7.0 не понимают значение inherit . При значении transparent IE6 не делает рамку прозрачной, а окрашивает ее в серый цвет.

CSS border-bottom-color Property

Description

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

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

Syntax

The syntax of the property is given with:

The example below shows the border-bottom-color property in action.

Example

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

Note: You must declare the border-style property before the
border-bottom-color CSS property. An element must have borders before you can set the color of the border.

Property Values

The following table describes the values of this property.

Browser Compatibility

The border-bottom-color property is supported in all major modern browsers.

border-bottom-color

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

Пример

Прописываем цвет для нижней границы:

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

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

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

border-bottom-color

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

Описание

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

Синтаксис

Аргументы

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

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

Half colored border on top and bottom using CSS

I would like to design my header as like above image. Here the issue is about bringing border with two different colors. Here is code what I have tried so far. Thanks in advance.

8 Answers 8

Use pseudo ::before and ::after on h1 tag along-with linear-gradient as background use height instead of border to get that styling,

Here’s one way without using pseudo elements:

Just for fun, you could produce a split-colored effect on the text color as well — with one extra pseudo element — like so:

Codepen demo

Unlike many other answers, no, you do not need to use pseudo-elements. Using multiple gradients will work just fine:

• Use two gradients: one rotated 90deg and the other rotated -90deg. Use two color stops: #880015 at 50% and #fff at 50%
• Use a background-size of 100% width and 3px in height, i.e. background-size: 100% 3px
• Position the two backgrounds at the top left and bottom left of your element

Voila—see proof-of-concept below:

Here’s one way to do it. I’m using linear-gradient on the :before and :after pseudo elements, with absolute position to do it.

I’ve used repeated color values at 50% to produce sharp change in color, with second color having no opacity to keep the original border color: linear-gradient(to right, #fff, #fff 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0))

You can use Position and Psuedo Elements to achieve it.

Adding a before and after element with borders and the right positioning does the trick.

I think this is what u want.

Not the answer you’re looking for? Browse other questions tagged html css or ask your own question.

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

site design / logo © 2020 Stack Exchange Inc; user contributions licensed under cc by-sa 4.0 with attribution required. rev 2020.11.9.35389

CSS: border-bottom-color property

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

Description

The CSS border-bottom-color property defines the color of the bottom border of a box.

Syntax

The syntax for the border-bottom-color CSS property is:

Parameters or Arguments

The color of the bottom border. It can be one of the following:

• Be sure to set the border-bottom-style property as well to make sure that your bottom border appears.
• See also border-bottom-style, border-bottom-width, and border-bottom 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-bottom-color 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-bottom-color property below, exploring examples of how to use this property in CSS.

Using Hexadecimal

Let’s look at a CSS border-bottom-color example where we have provided a hexadecimal value for the border-bottom-color property.

In this border-bottom-color example, we have provided a hexadecimal value of #000000 which would display a black bottom border for the

tag. Be sure to apply a border-bottom-style so that the border appears.

Using RGB

We can also provide the border-bottom-color value using rgb.

In this border-bottom-color example, rgb(0,0,0) would also display the bottom border for the

Using Color Name

Let’s look at a CSS border-bottom-color example where we have provided the value as a named color.

In this CSS border-bottom-color example, we have provided the name «black» which would also set the bottom border to black.

CSS border-bottom-color Property

CSS border-bottom-color property sets the bottom border color of an element.

Usages

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

Syntax

Here is a syntax for the CSS border-bottom-color property

Property Values

The following table describes the values of this property.

Examples

The example below shows to sets border bottom color.

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.

CSS border-bottom-color

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

You can also use border-color to set the color for all sides of the element, or border-bottom to set all properties for the bottom 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-bottom-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-bottom-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.

border-bottom-color

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

Описание

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

Синтаксис

Аргументы

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

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

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 .

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