Setting border color in html

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.

Источник

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.

Источник

Style borderColor Property

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

Property
borderColor	1.0	4.0	1.0	1.0	3.5

Syntax

Return the borderColor property:

Set the borderColor property:

Property Values

Value	Description
color	Specifies the color of the border. Look at CSS Color Values for a complete list of possible color values. Default color is the current color of the element
transparent	The color of the border is transparent (underlying content will shine through)
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Technical Details

Default Value:	current color
Return Value:	A String, representing the color of an element’s border
CSS Version	CSS1

More Examples

Example

Change the color of the top and bottom border to green, and left and right border to purple, of a element:

Example

Return the border color of a element:

Related Pages

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:

      Источник