CSS Border Color

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

You can set the color in various ways:

• Name: Specify a color name, like "red".
• HEX: Specify a HEX value, like #ff0000.
• RGB: Specify an RGB value, like rgb(255, 0, 0).
• HSL: Specify an HSL value, like hsl(0, 100%, 50%).
• Transparent: Use the transparent keyword to make the border invisible.

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

Example:

<p className="name">This border is red (by name).</p>
<p className="hex">This border is red (#ff0000).</p>
<p className="rgb">This border is red (rgb(255, 0, 0)).</p>
<p className="hsl">This border is red (hsl(0, 100%, 50%)).</p>
<p className="transparent">This border is transparent.</p>

CSS Border Color

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

You can set the color using different methods like color names, HEX values, RGB values, or HSL values.

Example: Demonstration of Different Border Colors

<p className="one">This border is red.</p>
<p className="two">This border is green.</p>
<p className="three">This border is blue (dotted).</p>

CSS Specific Side Colors

The border-color property can have from one to four values, which specify the color of each side of the element's border (top, right, bottom, and left).

• One value: Applies the same color to all four sides.
• Two values: The first value is for the top and bottom, and the second is for the left and right.
• Three values: The first value is for the top, the second for the left and right, and the third for the bottom.
• Four values: Each value corresponds to one side (top, right, bottom, and left).

Example: Specific Side Colors

<p className="one">This paragraph has different colors for each side of the border.</p>