Draw Circle using css alone

Question

Is it possible to draw circle using css only which can work on most of the browsers  IE Mozilla Safari

User · Answer

Yep  draw a box and give it a border radius that is half the width of the box    circle       background   f00      width  200px      height  200px      border-radius  50       Working demo   http   jsfiddle net DsW9h 1    x000D   x000D   circle   x000D      background   f00  x000D      width  200px  x000D      height  200px  x000D      border-radius  50   x000D    x000D   lt div id  circle  gt  lt  div gt  x000D   x000D   x000D

User · Answer

You could use a  before with a content with a unicode symbol for a circle  25CF     x000D   x000D   circle before   x000D    content     25CF   x000D    font-size  200px  x000D    x000D   lt span class  circle  gt  lt  span gt  x000D   x000D   x000D    I suggest this as border-radius won t work in IE8 and below  I recognize the fact that the suggestion is a bit mental

User · Answer

yup   here s my code    lt style gt     circle       width  100px       height  100px       border-radius  50        background-color  blue      lt  style gt   lt div class  circle  gt   lt  div gt

User · Answer

border radius is good option  if struggling with old IE versions then try HTML codes    amp  8226    and use css to change color  Output        8226

User · Answer

Create a div with a set height and width  so  for a circle  use the same height and width   forming a square add a border-radius of 50  which will make it circular in shape   note  no prefix has been required for a long time  You can then play around with background-color   gradients    even pseudo elements  to create something like this     x000D   x000D   red   x000D    background-color  red  x000D    x000D   green   x000D    background-color  green  x000D    x000D   blue   x000D    background-color  blue  x000D    x000D   yellow   x000D    background-color  yellow  x000D    x000D   sphere   x000D    height  200px  x000D    width  200px  x000D    border-radius  50   x000D    text-align  center  x000D    vertical-align  middle  x000D    font-size  500   x000D    position  relative  x000D    box-shadow  inset -10px -10px 100px  000  10px 10px 20px black  inset 0px 0px 10px black  x000D    display  inline-block  x000D    margin  5   x000D    x000D   sphere  after   x000D    background-color  rgba 255  255  255  0 3   x000D    content      x000D    height  45   x000D    width  12   x000D    position  absolute  x000D    top  4   x000D    left  15   x000D    border-radius  50   x000D    transform  rotate 40deg   x000D    x000D   lt div class  sphere red  gt  lt  div gt  x000D   lt div class  sphere green  gt  lt  div gt  x000D   lt div class  sphere blue  gt  lt  div gt  x000D   lt div class  sphere yellow  gt  lt  div gt  x000D   lt div class  sphere  gt  lt  div gt  x000D   x000D   x000D

User · Answer

This will work in all browsers   circle       background   f00      width  200px      height  200px      border-radius  50       -moz-border-radius  50       -webkit-border-radius  50

User · Answer

yes it is possible you can use border-radius CSS property  For more info have a look at http   zeeshanmkhan com post 2 css-rounded-corner-gradient-drop-shadow-and-opacity

[html] Draw Circle using css alone

Examples related to html

Examples related to css

Examples related to css-shapes