A real circular <div> by css or js means

Question

Is there a way to create a real circular div so overflow:hidden can hide everything in the div outside the circular region?

I tried using border-radius, -moz-border-radius, -webkit-border-radius but overflow:hidden only hide things that's outside the square/rectangle region. border-radius is indeed only giving an illusion of a circle.

Then I figured I could create a PNG image with a transparent circular area in the middle surrounded by opaque "background-like" region to hide things outside the circular region, but once again it is yet another illusion and it would be useless when the background is not static but changes accordingly to the screen width & height.

So how can I make a real circular div? By CSS or JS means?

Answer 1

Follow these links may be it helpful to you http://www.css3.info/preview/rounded-border/
http://border-radius.com/
http://www.w3schools.com/cssref/css3_pr_border-radius.asp