What is the simplest and most universal way of doing a CSS circle?

Question

what is the simplest and most universal way of transforming a div with these css propperties into a perfect circle?

div {
    background-color: red;
    padding: 5em;
}

possible duplicate of [Draw Circle using css alone](http://stackoverflow.com/questions/6936972/draw-circle-using-css-alone) — davidcondrey, Sep 23 '14 at 19:10
There are several older questions about drawing a CSS circle, with good answers. Asking which way is the simplest and most universal is primarily opinion-based. (Simplicity is relative to what you regard as simple.) — Jukka K. Korpela, Sep 23 '14 at 19:15

henser · Accepted Answer · 2014-09-23T19:14:57.237

The css rule to make a circle out of an HTML element is:

border-radius: 50%;

To make it work in all browsers additionally use:

-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;

Take a JSFIDDLE DEMO

HTML

<div></div>

CSS

div{
    border-radius:50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    width:50px;
    height:50px;
    background-color:#000;
}

What is the simplest and most universal way of doing a CSS circle?

1 Answers1