Ajax Loader
×

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:

Understanding border-radius

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
×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    Rounded Corners with CSS3 Border Radius

    CSSDeck G+