How to make a div with a circular shape

Question

i want to create a div with background color red and completely circular in shape  How can i do that   Css or jquery both can be used

User · Answer

HTML div elements  unlike SVG circle primitives  are always rectangular  You could use round corners  i e  CSS border-radius  to make it look round  On square elements  a value of 50  naturally forms a circle  Use this  or even a SVG inside your HTML   x000D   x000D  document body innerHTML    lt i gt  lt  i gt   repeat 4   x000D  i border-radius 50  display inline-block background  F48024   svg  fill  F48024 width 60px height 60px   i nth-of-type 1n  width 30px height 30px   i nth-of-type 2n  width 60px height 60px   x000D   lt svg viewBox  0 0 120 120  xmlns  http   www w3 org 2000 svg  gt     lt circle cx  60  cy  60  r  60   gt   lt  svg gt  x000D   x000D   x000D

User · Answer

circle       border-radius  50       width  500px      height  500px      background  red      lt div class  circle  gt  lt  div gt    see this FIDDLE

User · Answer

Demo  css  div       width  100px      height  100px      border-radius  50       background  red      html   lt div gt  lt  div gt

User · Answer

Use a border-radius property of 50    So for example    example-div        border-radius  50

User · Answer

You can do following   FIDDLE   lt div id  circle  gt  lt  div gt    CSS   circle       width  100px      height  100px      background  red      -moz-border-radius  50px      -webkit-border-radius  50px      border-radius  50px      Other shape SOURCE

User · Answer

By using a border-radius of 50  you can make a circle  Here is an example   CSS    exampleCircle      width  500px      height  500px      background  red      border-radius  50       HTML    lt div id    exampleCircle  gt  lt  div gt

[css] How to make a div with a circular shape?

Examples related to css

Examples related to css-shapes