Css row border color

HTML Table Borders

HTML tables can have borders of different styles and shapes.

How To Add a Border

To add a border, use the CSS border property on table , th , and td elements:

Example

Collapsed Table Borders

To avoid having double borders like in the example above, set the CSS border-collapse property to collapse .

This will make the borders collapse into a single border:

Example

Style Table Borders

If you set a background color of each cell, and give the border a white color (the same as the document background), you get the impression of an invisible border:

Example

table, th, td <
border: 1px solid white;
border-collapse: collapse;
>
th, td <
background-color: #96D4D4;
>

Round Table Borders

With the border-radius property, the borders get rounded corners:

Example

Skip the border around the table by leaving out table from the css selector:

Example

Dotted Table Borders

With the border-style property, you can set the appearance of the border.

The following values are allowed:

Example

Border Color

With the border-color property, you can set the color of the border.

Example

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

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.

Источник

CSS Border Color

The border-color property is used to set the color of the four borders.

• name — specify a color name, like «red»
• HEX — specify a HEX value, like «#ff0000»
• RGB — specify a RGB value, like «rgb(255,0,0)»
• HSL — specify a HSL value, like «hsl(0, 100%, 50%)»
• transparent

Note: If border-color is not set, it inherits the color of the element.

Example

Demonstration of the different border colors:

p.one <
border-style: solid;
border-color: red;
>

p.two border-style: solid;
border-color: green;
>

p.three border-style: dotted;
border-color: blue;
>

Specific Side Colors

The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border).

Example

p.one <
border-style: solid;
border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
>

HEX Values

The color of the border can also be specified using a hexadecimal value (HEX):

Example

RGB Values

Example

HSL Values

You can also use HSL values:

Example

You can learn more about HEX, RGB and HSL values in our CSS Colors chapters.

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

CSS border-color Property

The border-color property sets the color of an element’s four borders. This property can have from one to four values.

If the border-color property has four values:

• border-color: red green blue pink;
  • top border is red
  • right border is green
  • bottom border is blue
  • left border is pink

  If the border-color property has three values:

  • border-color: red green blue;
    • top border is red
    • right and left borders are green
    • bottom border is blue

    If the border-color property has two values:

    • border-color: red green;
      • top and bottom borders are red
      • right and left borders are green

      If the border-color property has one value:

      Note: Always declare the border-style property before the border-color property. An element must have borders before you can change the color.

      Default value:	The current color of the element
      Inherited:	no
      Animatable:	yes. Read about animatable Try it
      Version:	CSS1
      JavaScript syntax:	object.style.borderColor=»#FF0000 blue» Try it

      Browser Support

      The numbers in the table specify the first browser version that fully supports the property.

      CSS Syntax

      Property Values

      Value	Description	Demo
      color	Specifies the border color. Look at CSS Color Values for a complete list of possible color values. Default color is the current color of the element	Demo ❯
      transparent	Specifies that the border color should be transparent	Demo ❯
      initial	Sets this property to its default value. Read about initial
      inherit	Inherits this property from its parent element. Read about inherit

      More Examples

      Example

      Set a color for the border with a HEX value:

      Example

      Set a color for the border with an RGB value:

      Example

      Set a color for the border with an RGBA value:

      Example

      Set a color for the border with a HSL value:

      Example

      Set a color for the border with a HSLA value:

      Example

      Set a different border-color for each side of an element:

      Источник

      border-color¶

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

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

      Демо¶

      Каждую сторону можно установить по отдельности, используя border-top-color , border-right-color , border-bottom-color и border-left-color ; или с использованием режима записи border-block-start-color , border-block-end-color , border-inline-start-color и border-inline-end-color .

      Это свойство является сокращением для следующих свойств CSS:

      • border
      • border-bottom
      • border-bottom-color
      • border-bottom-left-radius
      • border-bottom-right-radius
      • border-bottom-style
      • border-bottom-width
      • border-collapse
      • border-color
      • border-image
      • border-image-outset
      • border-image-repeat
      • border-image-slice
      • border-image-source
      • border-image-width
      • border-left
      • border-left-color
      • border-left-style
      • border-left-width
      • border-radius
      • border-right
      • border-right-color
      • border-right-style
      • border-right-width
      • border-style
      • border-top
      • border-top-color
      • border-top-left-radius
      • border-top-right-radius
      • border-top-style
      • border-top-width
      • border-width
      • box-shadow

      Синтаксис¶

       1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

      /* 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; 

      Значения¶

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

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

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

      Значение по-умолчанию: Значение свойства color

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

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

      Описание и примеры¶

       1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

       html> head> meta charset="utf-8" /> title>border-colortitle> style> h1  border-color: red white; /* Цвет границы */ border-style: solid; /* Стиль границы */ > p  border-color: #008a77; /* Цвет границы */ border-style: solid; /* Стиль границы */ padding: 5px; /* Поля вокруг текста */ > style> head> body> h1>Шоу-бизнес как внутридискретное арпеджиоh1> p> Септаккорд, согласно традиционным представлениям, иллюстрирует однокомпонентный шоу-бизнес. p> body> html> 

      Источник