CSS Properties: How to define the shape of the corners in percentage?
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 |
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
- Weekly Trends and Language Statistics
- Weekly Trends and Language Statistics