CSS Properties: How to define the shape of the corners in percentage?

Last update on February 19 2024 13:03:16 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Declaration of HTML5 document type -->
<html>
<head>
<title>How to define the shape of the corners in percentage</title><!-- Title of the HTML document -->
<style type="text/css">
/* CSS styling */
div {
border: 3px solid #FF0000; /* Sets a solid red border with a thickness of 3 pixels */
padding: 10px 40px; /* Sets the padding inside the div */
background: #00CCCC; /* Sets the background color to a light blue shade */
width: 150px; /* Sets the width of the div */
border-radius:20%; /* Sets the border radius to 20% of the div's width and height */
}
</style>
</head>
<body>
<h1>w3resource Tutorial</h1><!-- Heading -->
<div>The border-radius property allows adding rounded corners to elements.</div><!-- Div element with rounded corners -->
</body>
</html>

Explanation:

This HTML document demonstrates how to define the shape of corners using the border-radius property in CSS with a percentage value.
The div element is styled with a solid border that has a thickness of 3 pixels and a color of #FF0000 (red).
Padding is set to 10 pixels at the top and bottom and 40 pixels on the left and right sides of the div.
The background color of the div is set to #00CCCC (light blue).
The width of the div is set to 150 pixels.
The border-radius property is used to define the shape of the corners as a percentage of the div's width and height. In this case, it is set to 20%, which means the corners will be rounded, with the radius being 20% of the width and height of the div.
As a result, the div appears with rounded corners, creating a visually appealing design with rounded edges.

Live Demo:

See the Pen border-radius-percentage-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page