CSS Properties: How to set rounded border to an element?

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

Solution:

HTML Code:

<!DOCTYPE html><!-- Declaration of HTML5 document type -->
<html>
<head>
<title>How to set rounded border to an element</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: 25px; /* Sets the border radius to create rounded corners */
}
</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 create a rounded border effect for an element using 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 create rounded corners for the div. A value of 25 pixels is specified, resulting in a noticeable curvature at each corner.
As a result, the div appears with rounded corners and a solid red border, providing a visually appealing design.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page