CODEWITHSUNDEEP
htmlcss
Ryan O'Connor
Ryan O'Connor

Reputation: 152

Border radius for specific corners isn't working on mobile

I am trying to use border-radius-top-left, etc.m but when I view the page on my phone, it treats it as if it's just border-radius and applies it to all corners. When I view it on my desktop it's working fine.

.container {
    display: inline-block;
    float: left;
    width: calc(90vw - 20px);
    margin: 0 5vw;
    background: rgba(255,255,255,0.05);
    font-size: 15px;
    color: #ffffff;
    height: 40px;
    padding: 0 10px;
    outline: none;
    margin-top: 25px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border: 1px solid rgba(255,255,255,0.25);
}

Not sure if this is relevant but the CSS is being applied to an <input>.

Upvotes: 2

Views: 1738

Answers (2)

Andy
Andy

Reputation: 5091

The issue is not that the browser doesn't support the shorthand border-radius properties, it's that mobile WebKit browsers apply a radius to all input elements by default. You need to set the border radius of the other corners to zero to remove it:

border-radius: 3px 3px 0 0;

Note when using the short-hand for border radius the order is clockwise: top-left, top-right, bottom-right, bottom-left.

Upvotes: 1

Mubariz Hajimuradov
Mubariz Hajimuradov

Reputation: 495

It's okay, probably you are using an old version of browser and it doesn't support border-radius-top-left etc.

But to make sure add this line:

border-radius: 0;  // Add this line
border-top-left-radius: 3px;
border-top-right-radius: 3px;

Upvotes: 2

Related Questions