CSS Properties: How to set a rounded border to the top-left corner of a division element?

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

Solution:

HTML Code:

<!DOCTYPE html><!-- Declares the document type as HTML -->
<html><!-- Root element of the HTML document -->
<head><!-- Contains metadata about the HTML document -->
<title>How to set a rounded border to the top-left corner of a division element</title><!-- Sets the title of the HTML document -->
<style type="text/css"> /* Begins a CSS style block */
div { /* Defines a CSS rule for all div elements */
border: 3px solid #FF0000; /* Sets a 3-pixel solid border with the color #FF0000 */
padding: 10px 20px; /* Sets the padding inside the div to 10 pixels on the top and bottom, and 20 pixels on the left and right */
background: #00CCCC; /* Sets the background color of the div to #00CCCC */
border-top-left-radius: 3em; /* Sets the radius of the top-left corner of the div to 3em, creating a rounded corner */
}
</style><!-- Ends the CSS style block -->
</head><!-- Ends the head section of the HTML document -->
<body><!-- Contains the content of the HTML document -->
<h1>w3resource Tutorial</h1><!-- Displays the text 'w3resource Tutorial' within an h1 element -->
<div>The border-top-left-radius property allows adding rounded corners to division elements.</div><!-- Displays a div element with text and rounded border on the top-left corner -->
</body><!-- Ends the body section of the HTML document -->
</html><!-- Ends the HTML document -->

Explanation:

The HTML document structure includes essential elements such as html, head, title, style, and body.
A CSS rule is defined for all div elements, specifying border, padding, background, and border radius properties.
The border-top-left-radius property is used to create a rounded border on the top-left corner of the div.
The text "w3resource Tutorial" is displayed within an h1 element.
A div element with text and a rounded border on the top-left corner is displayed.
No comments were added below the code line as requested.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page