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

Last update on February 19 2024 13:02:13 (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</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:100px; /* Sets the border radius to 100 pixels, creating a circular shape */
}
</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.
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. By setting it to 100 pixels, the corners become rounded, giving the appearance of circular shapes.
As a result, the div appears with rounded corners shaped like circles, providing a visually appealing design.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page