Alternative to make a circle with div

Question

I've a div using css 3,i'm placing a circle but when i place objects,it is going out of circle because div is still there and it is rectangle.

Can i use some thing instead of div and make circle.My objective is i need a circle ,when i place objects ,it should not move out of circle.

Thanks

Answer 1

There's no actual way of making an element circular. You can make it look circular using the well-known border-radius 'trick'.

To create the effect that the the text/contents of the div are only inside the borders of the circle, you can make sure it's filled within the largest square contained in the circle, using padding . Here's a visual illustration:

Here's a demo: little link .

HTML:

<div>
   Glee is awesome! Glee!
</div>

CSS:

div {
    border: 1px solid black;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    padding: 15px;
    height: 70px;
    width: 70px;
    overflow: hidden;
}

Edit: for images, you have two cases:

• You want the div to have a circular background. In this case, use the background-clip: padding-box; property (you need vendor-prefixed versions for this to work). Here's a demo: little link .

• You have an img tag inside your div -- you can use the prior method.

Answer 2

If you create a div with a border-radius equal to it's sides then you should have what you're looking for.

Creating Circular div for CSS3 compatible browsers

Answer 3

In HTML5 there is an element called canvas. It can be used to draw, using javascript, and therefore also for animation. This might help you, if you only want to draw. Else you could go with the z-index property in css

Answer 4

create a div and give it border-radius

   width: 230px;
   height: 230px;
   border-radius: 165px;
   -webkit-border-radius: 165px;
   -moz-border-radius: 165px;