CSS3 Border-radius (rounded corners)

Overview

This method is used to create rounded corners on all four sides of an element’s border. It also covers support for the shorthand.

Formal Definition

Specifications

CSS Backgrounds and Borders Module Level 4 # border-radius

Syntax

/* The syntax of the first radius allows one to four values */
 /* Radius is set for all 4 sides */
 border-radius: 10px;
 /* top-left-and-bottom-right | top-right-and-bottom-left */
 border-radius: 10px 5%;
 /* top-left | top-right-and-bottom-left | bottom-right */
 border-radius: 2px 4px 2px;
 /* top-left | top-right | bottom-right | bottom-left */
 border-radius: 1px 0 3px 4px;
 /* The syntax of the second radius allows one to four values */
 /* (first radius values) / radius */
 border-radius: 10px / 20px;
 /* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */
 border-radius: 10px 5% / 20px 30px;
 /* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */
 border-radius: 10px 5px 2em / 20px 25px 30%;
 /* (first radius values) / top-left | top-right | bottom-right | bottom-left */
 border-radius: 10px 5% / 20px 25em 30px 35em;
 /* Global values */
 border-radius: inherit;
 border-radius: initial;
 border-radius: revert;
 border-radius: unset;

Code snippets

test.css

Source:test.css

languagepalette.html

Source:languagepalette.html

Browser Compatibility