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?

where do you want the red line to show up? consider adding your html as well — designarti, Oct 22 '15 at 09:33

Sebastian Brosch · Answer 1 · 2015-10-22T09:49:41.343

72

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 class="circle"></div>

edited Oct 22 '15 at 09:49

answered Oct 22 '15 at 09:34

Sebastian Brosch

42,106
15
72
87

web-tiki · Answer 2 · 2022-06-03T07:28:37.743

36

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 class="circle"></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).

edited Jun 03 '22 at 07:28

answered Oct 22 '15 at 09:35

web-tiki

99,765
32
217
249

Hey, any chance one can control the red outline a little bit more? let me explain. I don't want to show the red outline as a full circle but rather have some parameter that controls how much of it shows. Think for example some % use case. 25% would show 3/4 of the red line, 50% would show half the circle etc. – sOltan Jun 18 '21 at 21:17
@sOltan with this approach, it is diofficult to control the outline as you intend to. I suggest you check out svg for that. Here is an example : https://stackoverflow.com/questions/29350504/circular-percent-progress-bar – web-tiki Jun 22 '21 at 08:59

score 8 · Answer 3 · edited Sep 04 '18 at 23:00

8

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);
}

edited Sep 04 '18 at 23:00

Community

1
1

answered Sep 21 '17 at 05:10

Nalan Madheswaran

10,136
1
57
42

score 4 · Answer 4 · edited Oct 22 '15 at 09:35

4

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;
}

edited Oct 22 '15 at 09:35

Sebastian Brosch

42,106
15
72
87

answered Oct 22 '15 at 09:34

Ya Zhuang

4,652
31
40

1

thanks for editing @sebastianbrosch i wrote too much markdown recently :) – Ya Zhuang Oct 22 '15 at 09:36
@web-tiki nuh.. i just keep the minimal change – Ya Zhuang Oct 22 '15 at 10:20

score 1 · Answer 5 · answered Oct 22 '15 at 09:37

Here is a jsfiddle so you can see an example of this working.

HTML code:

<div class="circle"></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>

CSS Circle with border

5 Answers5

Linked

Related