CSS | border-end-end-radius Property
The border-end-end-radius property in CSS is used to specify the logical border-radius at the block-end border. It is adjustable with the element’s writing-mode, direction, and text-orientation.
Syntax:
border-end-end-radius: length | percentage;
Property values:
- length: This property hold the border radius length in specific unit.
- percentage: This property holds the percentage value compare to parent elements.
- Firefox
Below examples illustrate the border-end-end-radius property in CSS:
Example 1:
<!DOCTYPE html><html> <head> <title>CSS | border-end-end-radius Property</title> <style> h1 { color: green; } div { background-color: purple; width: 250px; height: 50px; } .one { background-color: yellow; border-end-end-radius: 10px; } </style></head> <body> <center> <h1>Geeksforgeeks</h1> <b>CSS | border-end-end-radius Property</b> <br><br> <div> <p class="one">A Computer Science Portal</p> </div> </center></body> </html> |
Output:
Example 2:
<!DOCTYPE html><html> <head> <title>CSS | border-end-end-radius Property</title> <style> h1 { color: green; } div { background-color: purple; width: 250px; height: 50px; } .one { background-color: yellow; border-end-end-radius: 50%; } </style></head> <body> <center> <h1>Geeksforgeeks</h1> <b>CSS | border-end-end-radius Property</b> <br><br> <div> <p class="one">A Computer Science Portal</p> </div> </center></body> </html> |
Output:
Supported Browsers: The browsers supported by border-end-end-radius property are listed below:
Please Login to comment...