CSS Click Chart | CSS3 Browser Support and Information

Border Radius

Adds rounded corners to elements using shorthand, longhand, or "slash" syntax, which lets you define different values for horizontal and vertical radii on individual corners.

Specification

Border Radius on W3C

Example Code

.element {
  border-radius: 10px 11px 12px 13px;
}

/* shorthand for all corners */
.element2 {
  border-radius: 10px;
}

/* horizontal/vertical radii using a slash */
.element 3 {
  border-radius: 10px 5px / 20px 10px;
}

Live Demonstration

This paragraph has rounded corners defined without the use of JavaScript, images, or extra markup.

Browser Support

Can I Use border-radius? Data on support for the border-radius feature across the major browsers from caniuse.com.

Tools / Polyfills

Tutorials / Articles

Setting CSS3 Border-Radius with Slash Syntax