CODEWITHSUNDEEP
htmlcss
Scorpioniz
Scorpioniz

Reputation: 1449

css border with radius different colors

is it possible to make rounded and dotted div borders with two colors, if yes, how?

for now what I did is: 

.container{
  position: relative;
  width: 100%;
  height: 100vh;
}
.years {
  display: block;
  position: absolute;
  width: 50px;
  height: 0px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: #1c1e2e;
  z-index: 999;
  border-radius: 100%;
  text-align: center;
  padding: 60px 30px;
}
.years:before {
  content: '';
  position: absolute;
  width: 140px;
  height: 155px;
  top: -17px;
  left: -17px;
  border-radius: 100%;
  border-right: 3px dotted #000;
  border-top-left-radius: 100%;
  border-bottom-left-radius: 100%;
}
.years:after {
  content: '';
  position: absolute;
  width: 140px;
  height: 155px;
  top: -17px;
  left: -17px;
  border-radius: 100%;
  border-left: 3px dotted #dfbc82;
  border-top-left-radius: 100%;
  border-bottom-left-radius: 100%;
}
<div class="container">
  <div class="years"></div>
</div>

but i whould like to make like this: enter image description here

without any smoothiness, and can't figure out how to make normal dots like in the print screen... Any ideas? Appreciate any suggestions.. :/

Upvotes: 12

Views: 14625

Answers (2)

T&#250;lio Castro
T&#250;lio Castro

Reputation: 1323

To do this, you have to define all div corners, after that do a simple rotate to get vertical position, follow the example:

.container{
  position: relative;
  width: 100%;
  height: 100vh;
}
.years {
  display: block;
  position: absolute;
  width: 150px;
  height: 150px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: #1c1e2e;
  z-index: 999;
  border-radius: 100%;
  text-align: center;
}
.years:before {
  content: '';
  position: absolute;
  top: -17px;
  left: -17px;
  bottom:-17px;
  right:-17px;
  border-radius: 100%;
  border-right: 3px dotted #000;
  border-bottom: 3px dotted #000;
  border-top: 3px dotted transparent;
  border-left: 3px dotted transparent;
  transform: rotate(-45deg);
}
.years:after {
  content: '';
  position: absolute;
  top: -17px;
  left: -17px;
  bottom:-17px;
  right:-17px;
  border-radius: 100%;
  border-left: 3px dotted #dfbc82;
  border-top: 3px dotted #dfbc82;
  border-bottom: 3px dotted transparent;
  border-right: 3px dotted transparent;
  transform: rotate(-45deg);
}
<div class="container">
  <div class="years"></div>
</div>

Upvotes: 2

James Donnelly
James Donnelly

Reputation: 128781

You can split the colour of the border right down the middle of a regular element without needing help from any pseudo-elements by simply colouring in the bottom, left, top and right borders individually.

The problem with this, as you'll see, is that this isn't split directly from top to bottom, it's split at a slight angle:

div {
  font-size: 24px;
  height: 192px;
  line-height: 192px;
  text-align: center;
  width: 192px;
  
  border-radius: 100%;
  border-style: dotted;
  border-width: 4px;
  
  border-bottom-color: blue;
  border-left-color: blue;
  border-right-color: red;
  border-top-color: red;
}
<div>
  Foobar
</div>

To fix this, we can simply rotate our element by 45 degrees:

div {
  font-size: 24px;
  height: 192px;
  line-height: 192px;
  text-align: center;
  width: 192px;
  
  border-radius: 100%;
  border-style: dotted;
  border-width: 4px;
  
  border-bottom-color: blue;
  border-left-color: blue;
  border-right-color: red;
  border-top-color: red;
  
  transform: rotateZ(45deg);
}
<div>
  Foobar
</div>

The only problem now is that our inner content will also be rotated, so you can simply wrap that in an inner element and rotate that element the opposite way:

div {
  font-size: 24px;
  height: 192px;
  line-height: 192px;
  text-align: center;
  width: 192px;
  
  border-radius: 100%;
  border-style: dotted;
  border-width: 4px;
  
  border-bottom-color: blue;
  border-left-color: blue;
  border-right-color: red;
  border-top-color: red;
  
  transform: rotateZ(45deg);
}

span {
  display: block;
  transform: rotateZ(-45deg);
}
<div>
  <span>Foobar</span>
</div>

CSS's trasnform property is supported in all modern browsers, but may require prefixing for older browsers. Check http://caniuse.com/#feat=transforms2d for more details.

Upvotes: 14

Related Questions