CSS Properties: How to define the shape of the top-left corner in percentage?

Last update on February 19 2024 13:02:56 (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 define the shape of the top-left corner in percentage</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:20%; /* Sets the radius of the top-left corner of the div to 20% of the container's width and height, 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-percentage property allows adding rounded corners to elements.</div<<!-- Displays a div element with text and a rounded border on the top-left corner, defined in percentage --<
</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 border radius properties.
The border-top-left-radius property is used to create a rounded border on the top-left corner of the div with a percentage value of 20%, relative to the container's width and height.
The text "w3resource Tutorial" is displayed within an h1 element.
A div element with text and a rounded border on the top-left corner, defined in percentage, is displayed.
No comments were added below the code line as requested.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page