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

This can be achieved setting a transparent border around a transparent circle and using border-top-color: ; to give a section of the circles border a color.

background-color:transparent;
border:3px solid transparent;
border-top-color: green;

This creates a circle with a border only around the top quarter;

You can also use

border-bottom-color:green;

as well as left and right to border different quarters of the circles circumference.

Here's a fiddle for a loader with 3 partial circles that spin inside each other in alternate directions that show this in action.

Here's a fiddle for a loader with 3 partial circles that spin inside each other in alternate directions that show this in action.