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:
border-top-right-radius
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