border-color

border-color

The border-color shorthand CSS property sets the color of an element’s border.

Try it

You can find more information about border colors in CSS colors.

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* values */ border-color: red; /* top and bottom | left and right */ border-color: red #f015ca; /* top | left and right | bottom */ border-color: red rgb(240, 30, 50, 0.7) green; /* top | right | bottom | left */ border-color: red yellow green blue; /* Global values */ border-color: inherit; border-color: initial; border-color: revert; border-color: revert-layer; border-color: unset; 

The border-color property may be specified using one, two, three, or four values.

• When one value is specified, it applies the same color to all four sides.
• When two values are specified, the first color applies to the top and bottom, the second to the left and right.
• When three values are specified, the first color applies to the top, the second to the left and right, the third to the bottom.
• When four values are specified, the colors apply to the top, right, bottom, and left in that order (clockwise).

Values

Defines the color of the border.

Formal definition

• border-top-color : currentcolor
• border-right-color : currentcolor
• border-bottom-color : currentcolor
• border-left-color : currentcolor

• border-bottom-color : computed color
• border-left-color : computed color
• border-right-color : computed color
• border-top-color : computed color

• border-bottom-color : a color
• border-left-color : a color
• border-right-color : a color
• border-top-color : a color

Formal syntax

Examples

Complete border-color usage

HTML

div id="justone"> p>code>border-color: red;code> is equivalent top> ul> li>code>border-top-color: red;code>li> li>code>border-right-color: red;code>li> li>code>border-bottom-color: red;code>li> li>code>border-left-color: red;code>li> ul> div> div id="horzvert"> p>code>border-color: gold red;code> is equivalent top> ul> li>code>border-top-color: gold;code>li> li>code>border-right-color: red;code>li> li>code>border-bottom-color: gold;code>li> li>code>border-left-color: red;code>li> ul> div> div id="topvertbott"> p>code>border-color: red cyan gold;code> is equivalent top> ul> li>code>border-top-color: red;code>li> li>code>border-right-color: cyan;code>li> li>code>border-bottom-color: gold;code>li> li>code>border-left-color: cyan;code>li> ul> div> div id="trbl"> p>code>border-color: red cyan black gold;code> is equivalent top> ul> li>code>border-top-color: red;code>li> li>code>border-right-color: cyan;code>li> li>code>border-bottom-color: black;code>li> li>code>border-left-color: gold;code>li> ul> div> 

CSS

#justone  border-color: red; > #horzvert  border-color: gold red; > #topvertbott  border-color: red cyan gold; > #trbl  border-color: red cyan black gold; > /* Set width and style for all divs */ div  border: solid 0.3em; width: auto; margin: 0.5em; padding: 0.5em; > ul  margin: 0; list-style: none; > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

• Border-color related CSS properties: border , border-top-color , border-right-color , border-bottom-color , border-left-color ,
• Other border-related CSS properties: border-width , border-style
• The data type
• Other color-related properties: color , background-color , outline-color , text-decoration-color , text-emphasis-color , text-shadow , caret-color , and column-rule-color
• Applying color to HTML elements using CSS

Found a content problem with this page?

This page was last modified on Jul 18, 2023 by MDN contributors.

Your blueprint for a better internet.

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

Устанавливает цвет границы на разных сторонах элемента. Свойство позволяет задать цвет границы сразу для всех сторон элемента или только для указанных.

Синтаксис

border-color: [цвет | transparent] | inherit

Значения

transparent Устанавливает прозрачный цвет. inherit Наследует значение родителя.

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Результат зависит от количества и указан в табл. 1.

Табл. 1. Изменение цвета в зависимости от числа значений

Число значений	Результат
1	Цвет границы будет установлен для всех сторон элемента.
2	Первое значение устанавливает цвет верхней и нижней границы, второе — левой и правой.
3	Первое значение задает цвет верхней границы, второе — одновременно левой и правой границы, а третье — нижней границы.
4	Поочередно устанавливается цвет верхней, правой, нижней и левой границы.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

       
Lorem ipsum dolor sit amet
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  

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

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

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

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

Браузеры

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

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

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

CSS по категориям

Поля

Анимация

Градиент

Скруглённые уголки

Изображения

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

Псевдоклассы

Печать

Контент

Интерфейс

Таблица

Отступы

Список

Текст

Шрифт

Форматирование

Размеры

Позиционирование

Границы

Цвет и фон

Селекторы

• Селекторы тегов
• Идентификаторы
• Классы
• Мультиклассы
• Универсальный селектор
• Вложенные селекторы
• Дочерние селекторы
• Соседние селекторы
• Родственные селекторы
• [атрибут$=»значение»]
• [атрибут*=»значение»]
• [атрибут~=»значение»]
• [атрибут|=»значение»]
• Селекторы атрибутов
• [атрибут=»значение»]
• [атрибут^=»значение»]

Источник

CSS Border

In this chapter, we will speak about borders and how we can give styles to them. We can give width, style and color to the border.

Example of the border property:

html> html> head> title>Title of the document title> head> body> p style="border:3px dotted #1c87c9"> Example with a blue dotted border. p> p style="border:3px dashed #ffff00"> Exaxmple with a yellow dashed border. p> p style="border:3px solid #8ebf42"> Example with a green solid border. p> body> html>

Result

Border Width

The border-width property sets the width of a border.

The width can be specified in pixels. It can also be specified by one of the three pre-defined values: medium, thin, or thick.

You cannot use the «border-width» property alone. It will not work. Use «border-style» for setting the borders first.

Example of the border-width property:

html> html> head> style> p.border-width-1 < border-style: solid; border-width: 6px; > p.border-width-2 < border-style: dotted; border-width: 1px; > p.border-width-3 < border-style: dotted; border-width: medium; > p.border-width-4 < border-style: double; border-width: 8px; > p.border-width-5 < border-style: double; border-width: thick; > p.border-width-6 < border-style: solid; border-width: 3px 12px 6px 18px; > style> head> body> h2>The border-width Property h2> p class="border-width-1">Example with border-width. p> p class="border-width-2">Example with border-width. p> p class="border-width-3">Example with border-width. p> p class="border-width-4">Example with border-width. p> p class="border-width-5">Example with border-width. p> p class="border-width-6">Example with border-width. p> body> html>

Border Color

The border-color property is used to set the color of a border. The color can be set by:

• name — specifies a color name, like «red»
• RGB — specifies a RGB value, like «rgb(255,0,0)»
• Hex — specifies a hex value, like «#ff0000»

You cannot use the «border-color» property alone. It will not work. Use «border-style» for setting the borders first.

Usually, we write these three properties together in one row.

Example of the border-color property:

html> html> head> style> p.color-one < border-style: solid; border-color: blue; > p.color-two < border-style: dotted; border-color: yellow; > p.color-three < border-style: solid; border-color: DarkBlue orange green red; > style> head> body> h2>The border-color Property h2> p class="color-one">Example with blue solid border-color. p> p class="color-two">Example with yellow dotted border-color. p> p class="color-three">Example with multicolor border-color. p> body> html>

You can try other examples with our CSS Maker tool.

Border Style

The CSS border-style property sets the style of all four sides of an element’s borders. Borders are placed on the top of an element’s background. It can have from one to four values. So, each side can have its value. The default value of border-style is none.

Border-style has the following values:

Some browsers do not support some styles. Usually, when a style is not supported, the browser draws the border as a solid one.

CSS Border for individual sides

CSS provides properties that specify each border (right, left, bottom and top).

The border-style property can have 4 values, for example, border-style: dotted solid double dashed; where the top border is dotted, the bottom border is double, the right border is solid, and the left border is dashed.

The border-style property can have 3 values, for example, border-style: dotted solid double; where the top border is dotted, the bottom border is double, and the right and left borders are solid.

The border-style property can have 2 values, for example, border-style: dotted solid; where the right and left borders are solid, and the top and bottom borders are dotted. And, of course, this property can have only 1 value, for example, border-style: solid; where all the sides are solid.

Example of the border properties for individual sides:

html> html> head> style> p < border-top-style: double; border-right-style: solid; border-bottom-style: dotted; border-left-style: groove; > style> head> body> p>Example with border individual sides. p> body> html>

CSS border as a shorthand property

The CSS border property is a shorthand property for the following individual border properties:

• The CSS border-width property, which sets the width of all four sides of an element’s border.
• The CSS border-style property, which sets the style of all four sides of an element’s borders.
• The CSS border-color property, which sets the color of all four sides of an element’s border.

Example of the border shorthand property:

html> html> head> style> p.border-all < border: 3px solid red; > p.border-left < border-left: 4px solid blue; background-color: #dcdcdc; > p.border-top < border-top: 6px solid green; background-color: #dcdcdc; > style> head> body> h2>The border Shorthand Property h2> p class="border-all">Example with a shorthand property for border-width, border-style, and border-color. p> p class="border-left">Example with a shorthand property for border-left-width, border-left-style, and border-left-color. p> p class="border-top">Example with a shorthand property for border-top-width, border-top-style, and border-top-color. p> body> html>

Rounded borders

Using the CSS border-radius property, you can add rounded borders to an element.

Example of the border-radius property:

html> html> head> style> p.normal < border: 3px solid blue; > p.round-one < border: 3px solid blue; border-radius: 6px; > p.round-two < border: 3px solid blue; border-radius: 9px; > p.round-three < border: 3px solid blue; border-radius: 15px; > style> head> body> h2>The border-radius Property h2> p class="normal">Example with normal border p> p class="round-one">Example with round border p> p class="round-two">Example with rounder border p> p class="round-three">Example with roundest border p> body> html>

The difference between borders and outlines

Outlines and borders are usually confusing because they are very similar. But there are differences between these two:

• Outlines are drawn outside of the content of an element, so they don’t take up space.
• Outlines usually are rectangular, although they don’t have to be.

Источник