css border with radius different colors

Question

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:

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

Answer 1

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.

Answer 2

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>