Rounded corners on a div

This tutorial explains how to add rounded corners to divs on a web page using the border-radius CSS property. The image below shows an example of a div with rounded corners.

Screen Shot 2015-05-14 at 7.26.54 pm

You can set the border-radius for a div without having to set a border at all. You may also like to add rounded corners to images, buttons, divs or other elements on your page. They don’t just have to be added to divs.

Watch the video below and then scroll down to see the sample code:

Here is the HTML code:

<html>
    <head>
        <title>Rounded corners on divs</title>
        <link rel="stylesheet" href="theme.css" type="text/css"/>
    </head>

    <body>
        <div class="round">
        </div>
    </body>
</html>

Here is the CSS code showing how to set the same border-radius for all corners:

.round{
    background-color: #66bb6a;
    width: 100px;
    height: 100px;
    border-radius: 10px;
}

Here is the CSS code that shows how to specify the border-radius for each individual corner:

.round{
    background-color: #66bb6a;
    width: 100px;
    height: 100px;
    border-top-left-radius: 20px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 20px;
}