How do I create a circle or square with just CSS - with a hollow center

Question

It should just basically be an outline of the square or circle - that I can style accordingly  i e  change the color to whatever I want  change the thickness of the border  etc    I would like to apply that circle or square over something else  like an image or something  and the middle part should be hollowed out  so you can see the image beneath the square or circle   I would prefer for it to be mainly CSS   HTML

User · Answer

Circle Time     Easy way of making a circle with a hollow center   use border-radius  give the element a border and no background so you can see through it     x000D   x000D  div   x000D      display  inline-block  x000D      margin-left  5px  x000D      height  100px  x000D      border-radius  100   x000D      width 100px  x000D      border solid black 2px  x000D    x000D   x000D  body  x000D      background url  http   lorempixel com output people-q-c-640-480-1 jpg    x000D      background-size cover  x000D    x000D   lt div gt  lt  div gt  x000D   x000D   x000D

User · Answer

To my knowledge there is no cross-browser compatible way to make a circle with CSS  amp  HTML only     For the square I guess you could make a div with a border and a z-index higher than what you are putting it over   I don t understand why you would need to do this  when you could just put a border on the image or  something  itself     If anyone else knows how to make a circle that is cross browser compatible with CSS  amp  HTML only  I would love to hear about it    Caspar Kleijne border-radius does not work in IE8 or below  not sure about 9

User · Answer

In case of circle all you need is one div  but in case of hollow square you need to have 2 divs  The divs are having a display of inline-block which you can change accordingly  Live Codepen link  Click Me  In case of circle all you need to change is the border properties and the dimensions width and height  of circle  If you want to change color just change the border color of hollow-circle   In case of the square background-color property needs to be changed depending upon the background of page or the element upon which you want to place the hollow-square  Always keep the inner-circle dimension small as compared to the hollow-square  If you want to change color just change the background-color of hollow-square  The inner-circle is centered upon the hollow-square using the position  top  left  transform properties just don t mess with them   Code is as follows    x000D   x000D     CSS Code    x000D   x000D   hollow-circle   x000D    width  4rem  x000D    height  4rem  x000D    background-color  transparent  x000D    border-radius  50   x000D    display  inline-block  x000D     x000D       Use this    x000D    border-color  black  x000D    border-width  5px  x000D    border-style  solid  x000D       or    x000D       Shorthand Property    x000D       border  5px solid  000     x000D    x000D   x000D   hollow-square   x000D    position  relative  x000D    width  4rem  x000D    height  4rem  x000D    display  inline-block  x000D    background-color  black  x000D    x000D   x000D   inner-circle   x000D    position  absolute  x000D    top  50   x000D    left  50   x000D    transform  translate -50   -50    x000D    width  3rem  x000D    height  3rem  x000D    border-radius  50   x000D    background-color  white  x000D    x000D   lt  -- HTML Code -- gt  x000D   x000D   lt div class  hollow-circle  gt  x000D   lt  div gt  x000D   x000D   lt br  gt  lt br  gt  lt br  gt  x000D   x000D   lt div class  hollow-square  gt  x000D     lt div class  inner-circle  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You can use special characters to make lots of shapes   Examples   http   jsfiddle net martlark jWh2N 2    x000D   x000D   lt table gt  x000D     lt tr gt  x000D       lt td gt hollow square lt  td gt  x000D       lt td gt  amp  9633  lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt solid circle lt  td gt  x000D       lt td gt  amp bull  lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt open circle lt  td gt  x000D       lt td gt  amp  3664  lt  td gt  x000D     lt  tr gt  x000D   x000D   lt  table gt  x000D   x000D   x000D      Many more can be found here  HTML Special Characters

User · Answer

Try This   x000D   x000D  div circle   x000D    -moz-border-radius  50px 50px  x000D    -webkit-border-radius  50px 50px  x000D    border-radius  50px 50px  x000D    border  solid 21px  f00  x000D    width  50px  x000D    height  50px  x000D    x000D   x000D  div square   x000D    border  solid 21px  f0f  x000D    width  50px  x000D    height  50px  x000D    x000D   lt div class  circle  gt  x000D     lt img  gt  x000D   lt  div gt  x000D    lt hr  gt  x000D   lt div class  square  gt  x000D     lt img  gt  x000D   lt  div gt  x000D   x000D   x000D    More here

User · Answer

Shortly after finding this questions I found these examples on CSS Tricks  http   css-tricks com examples ShapesOfCSS   Copied so you don t have to click   x000D   x000D   square   x000D    width  100px  x000D    height  100px  x000D    background  red  x000D    x000D   circle   x000D    width  100px  x000D    height  100px  x000D    background  red  x000D    -moz-border-radius  50px  x000D    -webkit-border-radius  50px  x000D    border-radius  50px  x000D    x000D     Cleaner  but slightly less support  use  50   as value    x000D   lt div class  square  gt  lt  div gt  x000D   lt div class  circle  gt  lt  div gt  x000D   x000D   x000D    There are many other shape examples in the above link  but you will have to test for browser compatibility

User · Answer

If you want your div to keep it s circular shape even if you change its width height  using js for instance  set the radius to 50   Example  css    circle       border-radius  50  50        width  50px      height  50px      background  black      html    lt div class  circle  gt  lt  div gt

User · Answer

i don t know of a simple css 2 1 standard -only solution for circles  but for squares you can do easily    squared       border  2x solid black      then  use the following html code    lt img src       alt  an image   class  squared    gt

[html] How do I create a circle or square with just CSS - with a hollow center?

Examples related to html

Examples related to css

Examples related to geometry

Examples related to css-shapes