CSS border-radius

Reference on CSS border-radius, including working examples.

The CSS border-radius property, is the short hand of the four border radius's: border-top-left-radius, border-top-right-radius, border-bottom-left-radius, and finally border-bottom-right-radius.

This property can be used to create rounded corners with pure HTML and CSS.

Possible values

  1. Units of Measurement

Using CSS border-radius

The border-radius property takes two, or one set of values, but you can also do with just feeding it one value. If you only specify one value, the other values will simply be copied from the first.

The first set of values is used to set the horizontal radius, while the optional second set will define the vertical radius, allowing you to sort of "squeeze" the bend.

div {
  border-radius: 15px 10px 15px 15px / 10px 15px 10px 15px;
}

Older versions of Firefox, may need the -moz- prefix for border-radius to work properly, Brugbart recommends that you remove this prefix once Firefox supports the real property, to avoid that your CSS becomes to bloated. See also: Ditch support for Old Browsers

div {
  border-radius: 15px 10px;
  -moz-border-radius: 15px 10px;
}

Working live example

<!DOCTYPE html>
<html lang="en-US">

  <head>
    <title>CSS border-radius example - Brugbart Vision</title>
    <style type="text/css">
    div {
     margin: auto;
     width: 80%;
     padding: 1em;
     min-width: 768px;
     border: 1px solid #000;
     border-radius: 15px 10px 15px 15px / 10px 15px 10px 15px;
    }
    </style>
  </head>

  <body>
    <div>
      <h1>CSS border-radius example</h1>
      <p>Working Live Example of how to use the <strong>border-radius</strong> property of CSS.</p>
      <p>This example uses both border-radius, and -moz-border-radius. The -moz- decleartion can be removed when FireFox supports border-radius.</p>
    </div>
  </body>

</html>

Brugbart Vision!

Inherited? NO!