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.