CSS bordercolor Property (original) (raw)
CSS border-color Property
Last Updated : 17 Sep, 2024
The CSS border-color property allows developers to define the color of an element's border, enhancing the visual design of a webpage. It works in conjunction with the border property to provide control over the appearance of borders using various color values like-named colors, hex codes, or RGB values.
By combining border color with border-style and border width, you can create custom borders. For example, using border-color: red green blue yellow; apply different colors to each side of the border, adding a creative touch to your design
**Syntax
border-color: color-value;
**Multiple Sides Syntax
**border-color: top-color right-color bottom-color left-color;
**Default Value: The current color of the element
**Property Values for border-color
Here are the possible values you can use with the border-color property:
| **Property Value | **Description | **Example |
|---|---|---|
| **name | Specifies a color name | "blue" |
| **Hex | Specifies a hex value | "#0000ff" |
| **RGB | Specifies an RGB value | "rgb(0, 0, 255)" |
| **transparent | Sets the color to transparent | "transparent" |
This table outlines the different ways you can define a color value in CSS, from named colors to hex.
Individual Border Color Properties
The border-color property can be set individually for each side of the element using the following specific properties
| **Property | **Description |
|---|---|
| **CSS **border-left-color Property | Defines the color of the left border. |
| **CSS **border-top-color Property | Specifies the color of the top border. |
| **CSS **border-right-color Property | Determines the color of the right border. |
| **CSS **border-bottom-color Property | Applies a color to the bottom border. |
| **CSS **border-block-color Property | Sets the border color for logical block-level elements in one declaration. |
| **CSS **border-inline-color Property | Controls the border color for logical inline-level elements in one declaration. |
We will understand each property value through the examples:
Examples of Using border-color
**1. Set color-value by name:
All the 140 valid CSS color names can be assigned to the border color.
**Syntax:
**border-color: blue;
**Example: This example illustrates the **border-color property by setting the color using the name value.
HTML `
CSS border-color property