HTML5 / CSS3 Circle with Partial Border

Question

Is it possible to create a circle using only HTML5 / CSS3 which has a border that only goes part way around the circle? If not, what techniques can I use to accomplish this

Answer 1

It's possible.

• Draw two circles using border-radius one on top of another.
• Make one or more arc of both circles transparent by changing border-color.
• Use transform to rotate the second circle and you will have the arc of the size you need.

Here is the demo: http://jsfiddle.net/kJXwZ/2/

.wrapper {
  position: relative;
  margin: 20px;
}

.arc {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  border: 1px solid;
}

.arc_start {
  border-color: transparent red red red;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.arc_end {
  border-color: red red red transparent;
  -webkit-transform: rotate(75deg);
  -moz-transform: rotate(75deg);
  -ms-transform: rotate(75deg);
  -o-transform: rotate(75deg);
  transform: rotate(75deg);
}