Skip to content
Related Articles

Related Articles

CSS | border-start-start-radius Property
  • Last Updated : 27 Mar, 2020
GeeksforGeeks - Summer Carnival Banner

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:






    <!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>

    Output:

    Example 2:




    <!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>

    Output:

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

    • Firefox

    Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

    My Personal Notes arrow_drop_up
Recommended Articles
Page :