CODEWITHSUNDEEP
htmlcss
user2860957
user2860957

Reputation: 476

border-top-left-radius and border-top-rigth-radius are not giving result as expected

Edit1: Span code in the code and it's style are not needed, i just added them to show, where my border-radius is ending in first div, in second div and in third div, so i can show that i am confuse about the radius of third div, First div is plain, it just to show my div size.

Here is my html code i only added span to make sense of my question The problem is i am using border-top-left-radius and border-top-right-radius together, in moz document they say you can use two value, first will be for horizantal and second will be for vertical, which is fine i am getting the expected result as they describe the behaviour,

but as soon as i apply them both together, they shrink my vertical lenght or radius, can any body explain me the reason,

I only added span to make sense each span as a height of 40px, same as the second value for border-radius in each div, which is 40px; 

<style>
            div {
                width:50px;
                height: 60px;
                background: lightblue;
                margin: 20px;
                display: inline-block;
            }
            
            .first {
                border-top-left-radius: 100% 40px;
            }
            
            .second {
                border-top-right-radius: 100% 40px;
            }
            
            .third {
                border-top-right-radius: 100% 40px;
                border-top-left-radius: 100% 40px;
            }

            span {
                display: inline-block;
                box-sizing: border-box;
                width: 100%;
                border: 1px solid;
                height: 40px;
            }
        </style>
    </head>
    <body>
        <div></div>
        <div class="first">
            <span class="one"></span>
        </div>
        
        <div class="second">
            <span class="two"></span>
        </div>
        
        <div class="third">
            <span class="three"></span>
        </div>

Upvotes: 1

Views: 131

Answers (1)

P.S.
P.S.

Reputation: 16384

It's because the first argument is the width, and when you're writing:

border-top-right-radius: 100% 40px;
border-top-left-radius: 100% 40px;

it's trying to get 100% width, but can't when you're using 100% for both top-right and top-left radius. You are trying to change radius for 2 corners, so each of them can take properly only a half (50%) of full width (100%). It will work properly if you will write:

border-top-right-radius: 50% 40px;
border-top-left-radius: 50% 40px;

Here is an example:

<style>
            div{
                width:50px;
                height: 60px;
                background: lightblue;
                margin: 20px;
                display:inline-block;
            }
            
            .first{
                border-top-left-radius: 100% 40px;
            }
            
            .second{
                border-top-right-radius: 100% 40px;
            }
            
            .third{
                border-top-right-radius: 50% 40px;
                border-top-left-radius: 50% 40px;
            }
            span{
                display: inline-block;
                box-sizing: border-box;
                width:100%;
                border:1px solid;
                height: 40px;
            }
        </style>
    </head>
    <body>
        <div></div>
        <div class="first">
            <span class="one"></span>
        </div>
        
        <div class="second">
        <span class="two"></span>
        </div>
        
        <div class="third">
        <span class="three"></span>
        </div>

Upvotes: 1

Related Questions