Easier way to create circle div than using an image

Question

I m wondering if there s an easier way to create circular divs than what I m doing now   Currently  I am just making an image for each different size  but it s annoying to do this   Is there anyway using CSS to make divs which are circular and I can specify the radius

User · Answer

It is actually possible   See  CSS Tip  How to Make Circles Without Images  See demo   But be warned  It has serious disadvantages in terms of compatibility basically  you are making a cat bark   See it working here  As you will see you just have to set up the height and width to half the border-radius  Good luck

User · Answer

Give width and height depending on the size but keep both equal  x000D   x000D   circle   x000D    background-color  gray  x000D    height  400px  x000D    width  400px  x000D    border-radius  100   x000D    x000D   lt div class  circle  gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

x000D   x000D   fa-circle  x000D    color  tomato  x000D    x000D   x000D  div  x000D    font-size  100px  x000D    x000D   lt link href  https   maxcdn bootstrapcdn com font-awesome 4 7 0 css font-awesome min css  rel  stylesheet   gt  x000D   lt div gt  lt i class  fa fa-circle  aria-hidden  true  gt  lt  i gt  lt  div gt  x000D   x000D   x000D    Just wanted to mention another solution which answers the question of  Easier way to create circle div than using an image   which is to use FontAwesome   You import the fontawesome css file or from the CDN here  and then you just    lt div gt  lt i class  fa fa-circle  aria-hidden  true  gt  lt  i gt  lt  div gt    and you can give it any color you want any font size

User · Answer

For circle  create a div element and then enter width   2 times of the border radius   2 times padding  Also line-height   0 For example  with 50px as radii of the circle  the below code works well     width  100px  padding  50px 0  border  solid  line-height  0px  border-radius  50px

User · Answer

x000D   x000D   circle   x000D   height  20rem  x000D   width  20rem  x000D   border-radius  50   x000D   background-color   EF6A6A  x000D    x000D   lt div class  circle  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Try this   iphonebadge     border-radius 99px   -moz-border-radius 99px   -webkit-border-radius 99px    background red    color  fff    border 3px  fff solid    background-color   e7676d    background-image  -webkit-gradient linear  left top  left bottom  from  e7676d   to  b7070a       Saf4   Chrome      background-image  -webkit-linear-gradient top   e7676d   b7070a      Chrome 10   Saf5 1   iOS 5       background-image  -moz-linear-gradient top   e7676d   b7070a      FF3 6      background-image  -ms-linear-gradient top   e7676d   b7070a      IE10      background-image  -o-linear-gradient top   e7676d   b7070a      Opera 11 10       background-image  linear-gradient top   e7676d   b7070a     filter  progid DXImageTransform Microsoft gradient startColorStr   e7676d   EndColorStr   b7070a      -webkit-box-shadow  0px 2px 4px  000000     Saf3-4     -moz-box-shadow  0px 2px 4px  000000     FF3 5 - 3 6      box-shadow  0px 2px 4px  000000     Opera 10 5  IE9  FF4   Chrome 10       display inline-block    padding 2px 2px 2px 2px     margin 3px    font-family arial    font-weight bold

User · Answer

basically this uses div s position absolute to place a character at the given coordinates  so using the parametric equation for a circle  you can draw a circle   if you were to change div s position to relative  it ll result in a sine wave     in essence we are graphing equations by abusing the position property   i m not versed well in css  so someone can surely make this more elegant   enjoy   this works on all browsers and mobile devices  that i m aware of    i use it on my own website to draw sine waves of text  www cpixel com    the original source of this code is found here  www mathopenref com coordcirclealgorithm html       lt html gt       lt head gt  lt  head gt       lt body gt       lt script language  Javascript  gt       var x center   50    0 in both x center and y center will place the center     var y center   50     at the top left of the browser     var resolution step   360    how many times to stop along the circle to plot your character      var radius   50    how big ya want your circle      var plot character           could use any character here  try letters words for cool effects     var div top offset 10      var div left offset 10      var x y       for   var angle theta   0   angle theta  lt  2   Math PI   angle theta    2   Math PI resolution step            x   x center   radius   Math cos angle theta           y   y center - radius   Math sin angle theta           document write   lt div style  position absolute top      y div top offset      left     x div left offset       gt     plot character     lt  div gt                 lt  script gt       lt  body gt       lt  html gt

User · Answer

Setting the border-radius of each side of an element to 50  will create the circle display at any size    circle     border-radius  50     width  200px    height  200px        width and height can be anything  as long as they re equal

User · Answer

There s also  the bad idea of  using several  20   horizontal or vertical 1px divs to construct a circle  This jQuery plugin uses this method to construct different shapes

User · Answer

You can try the radial-gradient CSS function    circle       width  500px      height  500px      border-radius  50       background   ffffff     Old browsers        background  -moz-radial-gradient center  ellipse cover   ffffff 17    ff0a0a 19    ff2828 40    000000 41       FF3 6-15        background  -webkit-radial-gradient center  ellipse cover   ffffff 17   ff0a0a 19   ff2828 40   000000 41       Chrome10-25 Safari5 1-6        background  radial-gradient ellipse at center   ffffff 17   ff0a0a 19   ff2828 40   000000 41       W3C  IE10   FF16   Chrome26   Opera12   Safari7         Apply it to a div layer    lt div class  circle  gt  lt  div gt

User · Answer

Adding the css property of   border-radius  50     to any div makes it circular

User · Answer

Here s a demo  http   jsfiddle net thirtydot JJytE 1170   CSS    circleBase       border-radius  50       behavior  url PIE htc      remove if you don t care about IE8        type1       width  100px      height  100px      background  yellow      border  3px solid red     type2       width  50px      height  50px      background   ccc      border  3px solid  000     type3       width  500px      height  500px      background  aqua      border  30px solid blue      HTML    lt div class  circleBase type1  gt  lt  div gt    lt div class  circleBase type2  gt  lt  div gt  lt div class  circleBase type2  gt  lt  div gt    lt div class  circleBase type3  gt  lt  div gt    To make this work in IE8 and older  you must download and use CSS3 PIE  My demo above won t work in IE8  but that s only because jsFiddle doesn t host PIE htc   My demo looks like this

User · Answer

Let s say you have this image     to make a circle out of this you only need to add   circle     border-radius  50     width  100px    height  100px       So if you have a div you can do the same thing   Check the example below    x000D   x000D   circle   x000D    border-radius  50   x000D    width  100px  x000D    height  100px   x000D    animation  stackoverflow-example infinite 20s linear  x000D    pointer-events  none  x000D    x000D   x000D   keyframes stackoverflow-example   x000D    from   x000D      transform  rotate 0deg   x000D      x000D    to   x000D      transform  rotate 360deg   x000D      x000D    x000D   lt div gt  x000D     lt img class  circle  src  https   www sitepoint com wp-content themes sitepoint assets images icon javascript png  gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You can use radius but it will not work on IE  border-radius  5px 5px

User · Answer

I have 4 solution to finish this task   border-radius clip-path pseudo elements radial-gradient   x000D   x000D   circle1     background-color   B90136    width  100px    height  100px    border-radius  50px    specify the radius        circle2     background-color   B90136    width  100px    specify the radius      height  100px    specify the radius      clip-path  circle        circle3  before     content        display  block    width  100px    height  100px    border-radius  50px    specify the radius      background-color   B90136      circle4     background-image  radial-gradient  B90136 70   transparent 30      height  100px    specify the radius      width  100px    specify the radius      x000D   lt h3 gt 1 border-radius lt  h3 gt   lt div id  circle1  gt  lt  div gt   lt hr  gt   lt h3 gt 2 clip-path lt  h3 gt   lt div id  circle2  gt  lt  div gt   lt hr  gt   lt h3 gt 3 pseudo element lt  h3 gt   lt div id  circle3  gt  lt  div gt   lt hr  gt   lt h3 gt 4 radial-gradient lt  h3 gt   lt div id  circle4  gt  lt  div gt  x000D   x000D   x000D

[html] Easier way to create circle div than using an image?

Examples related to html

Examples related to css

Examples related to geometry

Examples related to css-shapes