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?
This question is related to
css
css-shapes
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;
}
_x000D_
<div class="circle"></div>
_x000D_
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 whitch you propably don't need as only browsers before chrome 4 safari 4 and Firefox 3.6 use them (see canIuse).
.circle {_x000D_
background-color:#fff;_x000D_
border:1px solid red; _x000D_
height:100px;_x000D_
border-radius:50%;_x000D_
-moz-border-radius:50%;_x000D_
-webkit-border-radius:50%;_x000D_
width:100px;_x000D_
}
_x000D_
<div class="circle"></div>
_x000D_
http://jsbin.com/qamuyajipo/3/edit?html,output
.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 class="circle"></div>
CSS code:
.circle {_x000D_
/*This creates a 1px solid red border around your element(div) */_x000D_
border:1px solid red;_x000D_
background-color: #FFFFFF;_x000D_
height: 100px;_x000D_
/* border-radius 50% will make it fully rounded. */_x000D_
border-radius: 50%;_x000D_
-moz-border-radius:50%;_x000D_
-webkit-border-radius: 50%;_x000D_
width: 100px;_x000D_
}
_x000D_
<div class='circle'></div>
_x000D_
Try 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);
}
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 {_x000D_
background-color:#fff;_x000D_
border:1px solid red; _x000D_
height:100px;_x000D_
border-radius:50%;_x000D_
-moz-border-radius:50%;_x000D_
-webkit-border-radius:50%;_x000D_
width:100px;_x000D_
}
_x000D_
<div class="circle"></div>
_x000D_
Source: Stackoverflow.com