CODEWITHSUNDEEP
htmlcss
Web R
Web R

Reputation: 575

How to divide a border into 4 equal parts?

For example, I have a rectangle:

<div id="rec">
</div>

CSS:

#rec {
  width: 100px;
  height: 100px;
  background: black;
  border: solid;
  border-width: 3px;
  border-color: red;
}

JSFIDDLE: https://jsfiddle.net/tquq01hq/

I want to do divide the border to 4 equal parts and each part will be in a different color. Any suggestions how to do it?

Upvotes: 2

Views: 496

Answers (1)

Sowmya
Sowmya

Reputation: 26969

Divide the border-color values border-color: red green blue grey;

#rec {
  width: 100px;
  height: 100px;
  background: black;
  border: solid;
  border-width: 3px;
  border-color: red green blue grey;
}

DEMO

Upvotes: 5

Related Questions