Skip to content
Related Articles

Related Articles

Improve Article
CSS | border-end-end-radius Property
  • Last Updated : 26 Mar, 2020

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 radious lenth 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



    My Personal Notes arrow_drop_up
Recommended Articles
Page :