Make a pure css circle with gradients and without gradients

Question

I failed to create a circle with below code. Can you explain how CSS circles work?

.circle {
    width: 200px;
    height: 200px;
    background: #4679BD;
}

Possible duplicate of [How to draw circle in html page?](https://stackoverflow.com/questions/6921792/how-to-draw-circle-in-html-page) — Mohammad Usman, Sep 21 '18 at 10:46

score 0 · Accepted Answer · answered Nov 16 '15 at 17:09

0

Without gradients

.circle {
    width: 200px;
    height: 200px;
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    border-radius: 50%;
    background: #4679BD;
}

answered Nov 16 '15 at 17:09

score 0 · Answer 2 · answered Nov 17 '15 at 17:48

In CSS you can use border-radius You can set the value to 50% for pure circle or you can set the value in px for having a shape with a rounded corners

Your code should be like:

.circle {
        width: 200px;
        height: 200px;
        border-radius: 50%;
    }

Make a pure css circle with gradients and without gradients

2 Answers2