Rounded Corners with CSS3 Border Radius
The CSS3 Module has border-radius
property using which you can achieve rounded corners without using images or other ugly hacks. This CSS property/feature is already widely known and used.
Official Spec URL: http://www.w3.org/TR/css3-background/#the-border-radius.
If you would like to technically understand how this works, then read the spec above that has some good diagrams explaining it. One of them is this:
This diagram is for border-radius: 55pt/25pt
. Whenever using border-radius
you can imagine 4 circles or ellipse at each corner whose radius is the specified px
, pt
, em
, %
or any other unit away from the box's sides (or basically the circle/ellipse itself).
Note: No support in Internet Explorer 8 and below.
Related:
Warning: Invalid argument supplied for foreach() in /var/www/cssdeck.com/app/modules/labs/views/_details.php on line 68