CSS Properties: How to set top-left-radius-initial property to its default value?

Last update on February 19 2024 13:01:52 (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 top-left-radius-initial property to its default value</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 40px; /* Sets the padding inside the div to 10 pixels on the top and bottom, and 40 pixels on the left and right */
background: #00CCCC; /* Sets the background color of the div to #00CCCC */
width: 150px; /* Sets the width of the div to 150 pixels */
border-top-left-radius:initial; /* Sets the border-top-left-radius property to its initial value, removing any previously defined rounded corners */
}
</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-initial property allows adding rounded corners to elements.</div><!-- Displays a div element with text and no rounded corners on the top-left corner, as the property is set to its default value -->
</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, width, and setting the border-top-left-radius property to its initial value.
The border-top-left-radius property is set to initial, which removes any previously defined rounded corners on the top-left corner of the div.
The text "w3resource Tutorial" is displayed within an h1 element.
A div element with text and no rounded corners on the top-left corner, as the property is set to its default value, is displayed.
No comments were added below the code line as requested.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page