Skip to content
Related Articles

Related Articles

CSS | border-start-start-radius Property
  • Last Updated : 27 Mar, 2020

The border-start-start-radius property in CSS is used to specify the logical border-radius at the block-start border(top-left). It is adjustable with the element’s writing-mode, direction, and text-orientation.

Syntax:

border-start-start-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-start-start-radius property in CSS:

    Example 1:



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        
    <head>
        <title>CSS | border-start-start-radius Property</title>
        <style>
            h1 {
                color: green;
            }
                
            div {
                background-color: purple;
                width: 250px;
                height: 50px;
            }
            .one {
                background-color: yellow;
                border-start-start-radius: 10px;
            }
        </style>
    </head>
        
    <body>
        <center>
            <h1>Geeksforgeeks</h1>
            <b>CSS | border-start-start-radius Property</b>
            <br><br>
            <div>
                <p class="one">A Computer Science Portal</p>
            </div>
        </center>
    </body>
        
    </html>

    chevron_right

    
    

    Output:

    Example 2:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        
    <head>
        <title>CSS | border-start-start-radius Property</title>
        <style>
            h1 {
                color: green;
            }
                
            div {
                background-color: purple;
                width: 250px;
                height: 50px;
            }
            .one {
                background-color: yellow;
                border-start-start-radius: 50%;
            }
        </style>
    </head>
        
    <body>
        <center>
            <h1>Geeksforgeeks</h1>
            <b>CSS | border-start-start-radius Property</b>
            <br><br>
            <div>
                <p class="one">A Computer Science Portal</p>
            </div>
        </center>
    </body>
        
    </html>

    chevron_right

    
    

    Output:

    Supported Browsers: The browsers supported by border-start-start-radius property are listed below:

    • Firefox
    My Personal Notes arrow_drop_up
Recommended Articles
Page :