How to make circular background using css?

I need make something like this. and I want to do it for a <div></div> which has width in %

I can do this by using an image and adding another div inside and z-index.

But I want to know if it's possible to make in this circle in backgroud using css.

8 Answers

Keep it simple:

.circle { border-radius: 50%; width: 200px; height: 200px; } 

Width and height can be anything, as long as they're equal

Check with following css. Demo

.circle { width: 140px; height: 140px; background: red; -moz-border-radius: 70px; -webkit-border-radius: 70px; border-radius: 70px; } 

For more shapes you can follow following urls:

Gradients?

div { width: 400px; height: 400px; background: radial-gradient(ellipse at center, #f73134 0%,#ff0000 47%,#ff0000 47%,#23bc2b 47%,#23bc2b 48%); } 

It can be done using the border-radius property. basically, you need to set the border-radius to exactly half of the height and width to get a circle.

JSFiddle

HTML

<div> <div> </div> </div> 

CSS

#container { height:400px; width:400px; border:1px black solid; } #inner { height:200px; width:200px; background:black; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; margin-left:25%; margin-top:25%; } 

You can use the :before and :after pseudo-classes to put a multi-layered background on a element.

#divID : before { background: url(someImage); } #div : after { background : url(someotherImage) -10% no-repeat; } 

Here is a solution for doing it with a single div element with CSS properties, border-radius does the magic.

CSS:

.circle{ width:100px; height:100px; border-radius:50px; font-size:20px; color:#fff; line-height:100px; text-align:center; background:#000 } 

HTML:

<div>Hello</div> 

If you want to do it with only 1 element, you can use the ::before and ::after pseudo elements for the same div instead of a wrapper.
See

Maybe you should use a display inline-block too:

.circle { display: inline-block; height: 25px; width: 25px; background-color: #bbb; border-radius: 50%; z-index: -1; }