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

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

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page