css border color - Plugin House

The CSS border-color property is used to set the color of an element’s border. The property can be applied to a specific element by using a selector and the style attribute, or to multiple elements by using a class or ID selector in a stylesheet.

You can also use border-color property in conjunction with other border properties like border-width, border-style, border-radius etc. to control the overall appearance of the border.

<div style="border: 2px solid red;">This element has a red border</div>

.sample-class {
  border-color: #4CAF50;
}

<div class="sample-class">This element has a green border</div>

another example

.sample-class {
  border: 2px solid hsla(120,100%,50%,0.5);
  border-radius: 10px;
}

<div class="sample-class">This element has a green border with rounded corners</div>

You can also set the border-color for each sides of an element using the properties border-top-color, border-right-color, border-bottom-color, border-left-color.

There is option to set different border-color for each side of the element like below

.sample-class {
  border-top-color: #4CAF50;
  border-right-color: red;
  border-bottom-color: blue;
  border-left-color: yellow;
  border-width: 2px;
  border-style: solid;
}

<div class="sample-class">This element has different border color for each side</div>

admin

Related Posts