border-top-right-radius
border-top-right-radius is a CSS property used to define the curvature of the top-right corner of an element’s border. It creates a visually rounded effect, enhancing the visual appearance.
Example: The below example shows the border-top-right-radius on the element.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0"> < style > #dive { height: 30px; width: 500px; font-size: 20px; background-color: aquamarine; text-align: center; padding: 5px; border: 3px solid blue; } </ style > </ head > < body > < div id = "dive" style = "border-top-right-radius: 55px;" > This is the example of border-top-right-radius </ div > </ body > </ html > |
Output:
CSS Rounded Corners
CSS Rounded Corner facilitates the border-radius Property to create corners round for the element. The border-radius Property in CSS is used to define the radius and make corners round from the outer border edge of a specific element. This article will cover all the related aspects of the border-radius Property & understand them with the help of suitable examples.
Table of Content
- CSS border-radius Property
- border-radius with One Value
- border-radius with Two Values
- border-radius with Three Values
- border-radius Four Values
- Other CSS border Property
- border-top-left-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left- radius