Ryan O'Connor Ryan O'Connor - 1 year ago 47
CSS Question

Border radius for specific corners isn't working on mobile

I am trying to use

, 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

Answer Source

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;