CSS | border-start-end-radius Property
The border-start-end-radius property in CSS is used to specify the logical border-radius at the block-start border(top-right). It is adjustable with the element’s writing-mode, direction, and text-orientation.
Syntax:
border-start-end-radius: length | percentage
Property values:
- length: This property holds the border radius length in a specific unit.
- percentage: This property holds the percentage value compare to parent elements.
Below examples illustrate the border-start-end-radius property in CSS:
Example 1:
HTML
<!DOCTYPE html> < html > < head > < title >CSS | border-start-end-radius Property</ title > < style > h1 { color: green; } div { background-color: purple; width: 250px; height: 50px; } .one { background-color: yellow; border-start-end-radius: 10px; } </ style > </ head > < body > < center > < h1 >w3wiki</ h1 > < b >CSS | border-start-end-radius Property</ b > < br >< br > < div > < p class = "one" >A Computer Science Portal</ p > </ div > </ center > </ body > </ html > |
Output:
Example 2:
HTML
<!DOCTYPE html> < html > < head > < title >CSS | border-start-end-radius Property</ title > < style > h1 { color: green; } div { background-color: purple; width: 250px; height: 50px; } .one { background-color: yellow; border-start-end-radius: 50%; } </ style > </ head > < body > < center > < h1 >w3wiki</ h1 > < b >CSS | border-start-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-start-end-radius property are listed below:
- Google Chrome 89 and above
- Edge 89 and above
- Firefox 66 and above
- Opera 75 and above
- Safari 15 and above
- Internet Explorer not supported
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-end-radius
Contact Us