CSS Circle with border

Question

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

User · Answer

You are missing the border width and the border style properties in the Border shorthand property :

_x000D_

.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).

User · Answer

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    x000D   x000D   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   lt div class  circle  gt  lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

x000D   x000D   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   lt div class  circle  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Here is a jsfiddle so you can see an example of this working   HTML code    lt div class  circle  gt  lt  div gt    CSS code    x000D   x000D   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   lt div class  circle  gt  lt  div gt  x000D   x000D   x000D

User · Answer

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

[css] CSS Circle with border

Examples related to css

Examples related to css-shapes