logo Send us mail:
contact@reliancewisdom.com
WhatsApp or call:
+234 (0)808 881 1560
TOGGLE NAVIGATION
Back to All Forum Posts
How to Apply Rounded Corner to an HTML Element
Ishola Wasiu    Jun 6, 2017 at 12:02 PM    1    1460

Hi guys!

I visited some websites and saw some HTML elements like image, div, etc. being displayed with rounded corners. When I viewed the image by right-clicking on it and selecting the "View image" option, it has no rounded corners. Please how can I display my images, div, etc. with this formatting?

Back to All Forum Posts

1 Answer
Ishola Ayinla says...
Jun 8, 2017 at 12:08 PM

To do this is very simple. Kindly copy and paste the code below in an HTML file:

<!DOCTYPE html>
<html>
<head>
<style> 
#rcorners1 {
    border-radius: 25px;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px;    
}

#rcorners2 {
    border-radius: 25px;
    border: 2px solid #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px;    
}

#rcorners3 {
    border-radius: 25px;
    background: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px; 
    width: 200px;
    height: 150px;    
}

#rcorners4 {
    border-radius: 15px 50px 30px 5px;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

#rcorners5 {
    border-radius: 15px 50px 30px;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

#rcorners6 {
    border-radius: 15px 50px;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px; 

#rcorners7 {
    border-radius: 50px/15px;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

#rcorners8 {
    border-radius: 15px/50px;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

#rcorners9 {
    border-radius: 50%;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px;

</style>
</head>
<body>

<p>The border-radius property allows you to add rounded corners to elements.</p>
<p>Rounded corners for an element with a specified background color:</p>
<p id="rcorners1">Rounded corners!</p>
<p>Rounded corners for an element with a border:</p>
<p id="rcorners2">Rounded corners!</p>
<p>Rounded corners for an element with a background image:</p>
<p id="rcorners3">Rounded corners!</p>

<p>Four values - border-radius: 15px 50px 30px 5px:</p>
<p id="rcorners4"></p>

<p>Three values - border-radius: 15px 50px 30px:</p>
<p id="rcorners5"></p>

<p>Two values - border-radius: 15px 50px:</p>
<p id="rcorners6"></p>

<p>Elliptical border - border-radius: 50px/15px:</p>
<p id="rcorners7"></p>

<p>Elliptical border - border-radius: 15px/50px:</p>
<p id="rcorners8"></p>

<p>Ellipse border - border-radius: 50%:</p>
<p id="rcorners9"></p>

</body>
</html>

You can also edit the code to suit your taste

Tip: The border-radius property is actually a shorthand property for the border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius properties.

CSS3 border-radius - Specify Each Corner

If you specify only one value for the border-radius property, this radius will be applied to all 4 corners.

However, you can specify each corner separately if you wish. Here are the rules:

  • Four values: first value applies to top-left, second value applies to top-right, third value applies to bottom-right, and fourth value applies to bottom-left corner
  • Three values: first value applies to top-left, second value applies to top-right and bottom-left, and third value applies to bottom-right
  • Two values: first value applies to top-left and bottom-right corner, and the second value applies to top-right and bottom-left corner
  • One value: all four corners are rounded equally

Here are three examples:

  1. Four values - border-radius: 15px 50px 30px 5px;
  2. Three values - border-radius: 15px 50px 30px;
  3. Two values - border-radius: 15px 50px;

Full Details
Add a friend to chat
Hi ! You have not added any friend to chat with. Kindly click on the link below to add a friend. Add a friend