Open In App

CSS | border-end-end-radius Property

Improve
Improve
Like Article
Like
Save
Share
Report

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.
  • 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:

    • Firefox


    Last Updated : 13 Sep, 2021
    Like Article
    Save Article
    Previous
    Next
    Share your thoughts in the comments
Similar Reads