Ryan O'Connor Ryan O'Connor - 2 months ago 8
CSS Question

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

Answer

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;