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

Last update on February 20 2024 12:25:21 (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-right 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 division elements */
border: 3px solid #FF0000; /* Sets a 3-pixel solid border with the color #FF0000 */
padding: 10px 40px; /* Sets the padding inside the element to 10 pixels on the top and bottom, and 40 pixels on the left and right */
background: #00CCCC; /* Sets the background color of the element to #00CCCC */
width: 150px; /* Sets the width of the element to 150 pixels */
border-top-right-radius:20%; /* Sets the radius of the top-right corner of the element to 20% of its width */
}
</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-right-radius-percentage property allows adding rounded corners to elements.</div><!-- Displays a div element with text and a rounded top-right corner with a specific 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 their border, padding, background color, width, and setting the border-top-right-radius property to create a rounded top-right corner with a specific percentage.
The text "w3resource Tutorial" is displayed within an h1 element.
A div element with text and a rounded top-right corner with a specific percentage is displayed.
No comments were added below the code line as requested.

Live Demo:

See the Pen border-top-right-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