How to make a circle breadcrumb with only CSS

css, html

Solution

Quite simple using CSS3's `border-radius` property:

LIVE DEMO

LIVE DEMO with a bit of CSS3 anim + jQuery

HTML

  <span class="btnz">
    <span class="active"></span>
    <span></span>
    <span></span>
    <span></span>
  </span>

CSS:

.btnz>span{
  display:inline-block;
  width:10px;
  height:10px;
  background:#C0CCD7;
  border-radius:7px;
  border:1px solid #C0CCD7;
  border-top:1px solid #9DA7AF;
  margin:0 3px;
}
.btnz>span.active{
  background: #63C000;
  border: 1px solid #5FAF0E;
  border-bottom: 1px solid #39660F;
}

More info here: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

Problem

Has anyone seen a available css3 solution to implement the above? I'd like to find a way without requiring images and also not rewrite something that others have likely already solved well. Anyone know of any existing solutions?

Original source