Border-color property

Category: Web Development & Approved by devanshchakravarti83@gmail.com On February-02-2021 11:02:01

---

Border-color Property

The border-color property set the color of the element’s four sides border.
Its syntax is: border-color: value;
Values description:

• 
  Defines the color of border. Value of color can be select in all format as color names, HEX code, RGB value and other.
  

The border-color is shorthand for:

• border-top-color


• border-right-color


• border-bottom-color


• border-left-color

Let see a syntax for all values of border-color property.
Example:
“Global value”
border-color: intital;
border-color: inherit;
border-color: unset;
“Single value”
border-color: #ff0000; //applied in all direction
“Two value”
border-color: #ff0000 #0000ff; // horizontal | vertical
“Three value”
border-color: #ff0000 #0000ff #00ff00; // top | vertical | bottom
“Four value”
border-color: #ff0000 magneta #0000ff orange; //top | right | bottom | left

Here the single value will apply border color in all direction. In two value the first value apply border color in vertical and other value in horizontal direction of an element. In three value the first value apply border color in top and second in vertical direction and third value at bottom of an element. In four value the border color is apply to element side in clockwise it start from top, right, bottom and left.

Code Example:

We have made blog on CSS tutorial from basic, if you haven’t read them so Click Here

Coding Challanges
C Programming Language
Daily Tech News/Updates
Web Development
Free Courses (Udemy)
Ethical Hacking and Cyber Security
Education

---

---

---

---

---