Tag Archives: round

Rounded corners on a div

This tutorial explains how to add rounded corners to divs on a web page. The image below shows an example of a div with rounded corners.

Screen Shot 2015-05-14 at 7.26.54 pm

You may 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:

<!DOCTYPE html>
<html>
<head>
 <title>Rounded corners</title>
 <link rel="stylesheet" href="resources/stylesheet13.css"/>
</head>
 
<body>
 <div class="round_box">
 <p>This box has rounded corners</p>
 </div>
</body>
</html>

Here is the CSS code:

.round_box{
 background-color:#31D457;
 width:250px;
 text-align:center;
 padding: 30px 20px;
 border-radius:20px;
}

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

.round_box{
 background-color:#31D457;
 width:250px;
 text-align:center;
 padding: 30px 20px;
 border-top-left-radius:20px;
 border-top-right-radius:20px;
 border-bottom-left-radius:20px;
 border-bottom-right-radius:20px;
}