15

This is a very specific question, that I can't find any documented evidence to support, but have rather a lot of empirical evidence, although only based on a single phone.

The single Galaxy S4 that we have available in the office doesn't appear to have support for the border-radius property in it's stock browser. I've tested several different websites, and have tried all different browser versions of the property (webkit, moz, etc), and it just don't seem to support it.

Because we only have 1 S4 available (I've asked around, and no one else has one or knows anyone who does), and because rounded corners via the border-radius property was such a big feature of CSS3, I find it hard to believe that they would have removed it deliberately, which leads me to believe that either:

  1. I've found a bug with the stock browser, or
  2. It's device specific to the only phone we have available.

So, has anyone else come across this before, or does anyone have an S4 available to them that they could check on http://css3test.com/ to see if border-radius is supported?

Dark Hippo
  • 1,245
  • 2
  • 16
  • 30
  • I have the same issue with my S4. the border-radius CSS does not work anymore in the firmware browser since the latest update grrrrr – Coen Damen Jul 07 '13 at 08:53
  • When looking at the stock browser for Android on Samsung Galaxy S4 - It says version 1 considering its a new one! On my ~1 yr old Note II the stock browser version is 4.1.2. Might have something to do with it and plus it does not support SVG images :( –  Oct 20 '13 at 15:04

4 Answers4

28

I had the same issue! You can fix it like that:

border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;

PS. I hate such updates

aviomaksim
  • 2,289
  • 20
  • 14
  • 8
    The accepted answer doesn't work in case of parent elements having border radius and overflow hidden; child elements will extend beyond the rounder corners. – KobeBryant Oct 17 '13 at 19:49
  • Just FYI: animations make this not work. I had to remove all animations from the element for this workaround to work. – Ian Aug 06 '14 at 14:25
2

We've managed to reproduce this with our Galaxy S4 stock browser, so it's probably something more than just your device.

the S3 in white and the S4 in black

Originally uploaded to twitter (the image)

itainathaniel
  • 585
  • 1
  • 5
  • 12
2

I work with someone who received the May 30th firmware update and is seeing this same issue as well as some other CSS issues. I've not yet received that update and I'm on the April 24th version and I am not seeing this issue. Concerned that this is something introduced in the latest update.

Snorkeler
  • 316
  • 2
  • 3
  • Brilliant, thanks for the info. It's interesting to know that it's a recent firmware update that seems to have broken it. – Dark Hippo Jun 25 '13 at 14:18
  • I have the same issue with my S4. the border-radius CSS does not work anymore since the latest update grrrrr – Coen Damen Jul 07 '13 at 08:52
1

I also encountered the same issue (Webview + stack browser Android 4.2.2 / Archos101 Xenon)

Fixed it by removing the background property from : 

.circle { 
width: 100px;
height: 100px;
background: rgba(255,255,255,0.75);
border: 5px solid rgba(255, 255, 255, 0.75);
border-radius: 50px;
}

and by adapting the width of the border property

.circle {
width: 100px;
height: 100px;
border: 50px solid rgba(255, 255, 255, 0.75); 
border-radius: 50px;
}

I hope this can be helpful.

Marc
  • 354
  • 2
  • 7
  • I had some glitchs with the S4 with border radius and a background color. The circle was positionned with absolute, over an icon. This was the only way to go for this device... thanks for the idea – Guillaume Gendre Jun 03 '15 at 15:23