Every guide I find has the line and fill the same colour. All I want is a circle with a red line and white fill.
I have tried:
.circle { border: red; background-color: #FFFFFF; height: 100px; -moz-border-radius:75px; -webkit-border-radius: 75px; width: 100px;
}But cannot get the red border?
15 Answers
You forgot to set the width of the border! Change border: red; to border:1px solid red;
Here the full code to get the circle:
.circle { background-color:#fff; border:1px solid red; height:100px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; width:100px;
}<div></div>You are missing the border width and the border style properties in the Border shorthand property :
.circle { border: 2px solid red; background-color: #FFFFFF; height: 100px; border-radius:50%; width: 100px;
}<div></div>Also, You can use percentages for the border-radius property so that the value isn't dependent of the circle width/height. That is why I used 50% for border-radius (more info on border-radius in pixels and percent).
Side note : In your example, you didn't specify the border-radius property without vendor prefixes, you propably don't need them as only browsers before chrome 4 safari 4 and Firefox 3.6 use them (see canIuse).
2Try this:
.circle { height: 20px; width: 20px; padding: 5px; text-align: center; border-radius: 50%; display: inline-block; color:#fff; font-size:1.1em; font-weight:600; background-color: rgba(0,0,0,0.1); border: 1px solid rgba(0,0,0,0.2);
}.circle { border: 1px solid red; background-color: #FFFFFF; height: 100px; -moz-border-radius:75px; -webkit-border-radius: 75px; width: 100px;
}Here is a jsfiddle so you can see an example of this working.
HTML code:
<div></div>CSS code:
.circle { /*This creates a 1px solid red border around your element(div) */ border:1px solid red; background-color: #FFFFFF; height: 100px; /* border-radius 50% will make it fully rounded. */ border-radius: 50%; -moz-border-radius:50%; -webkit-border-radius: 50%; width: 100px; }<div class='circle'></div>
