This website uses cookies

We use cookies to personalize content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you've provided to them or that they've collected from your use of their services. Please read more at our privacy policy page.



Border-radius

In this chapter we will learn how to use the border-radius property.

This property is a shorthand to set the four properties border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius.

The border-top-left-radius CSS property sets the rounding of the top-left corner of the element.

The border-top-right-radius CSS property sets the rounding of the top-right corner of the element.

The border-bottom-right-radius CSS property sets the rounding of the top-left corner of the element.

The border-bottom-left-radius CSS property sets the rounding of the bottom-left corner of the element.

CSS Syntax

border-radius: length | % (length) | initial | inherit;

Let's see an example:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        height: 40px;
        background: #1c87c9;
        border: 4px solid #000000;
      }
    </style>
  </head>
  <body>
    <h2>Border-radius example.</h2>
    <div></div>
  </body>
</html>

For the best possible browser support, you should prefix with -webkit- and -moz- .

Let's see an example:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .radius-pixel {
        height: 40px;
        background: lightgray;
        border: 4px solid #1c87c9;
        border-radius: 12px;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
      }
      .radius-percent {
        width: 120px;
        height: 120px;
        margin-top: 20px;
        background: lightgray;
        border: 4px solid #1c87c9;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <h2> Border-radius example.</h2>
    <div class="radius-pixel"></div>
    <div class="radius-percent"></div>
  </body>
</html>

Property Values

Value Descriptions
length It is used to set the rounding of the corners.
% It is used to set the rounding of the corners in percent.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.