Border-radius not working in safari

HTML & CSS
1

Hi,

My understanding is that it is no longer necessary to use media queries for displaying border-radius.

However, after a hair-pulling day, I am not sure whether this is correct or not.

I need to display my border like this,

Works in Chrome

and not like this - as seen in Safari 5.1.7

I have tried a wide variety of css as exampled below, but none display correctly in Safari.

img.imgbox {
border: solid #adadae 2px !important;
-webkit-border-radius: 45px;
-moz-border-radius: 45px;
border-radius: 45px;
}

img.imgbox {
border: solid #adadae 2px !important;
-webkit-border-top-left-radius: 45px;
-webkit-border-top-right-radius: 45px;
-webkit-border-bottom-right-radius: 45px;
-webkit-border-bottom-left-radius: 45px;
border-radius: 45px;
}

I have also tried changing the order of the values but it has made no difference.

If anyone has any advice to offer, it would be greatly appreciated.

Thank you

2

It never was necessary. Did you mean vendor prefixes?

Safari 5 is pretty old now, and I doubt it’s widely used any more. Anyhow, Safari has not needed vendor prefixes since version 5. I don’t remember, but perhaps version 5 was a bit buggy?

3

@ralph.m

My apologies - yes, vendor prefixes. Too tired when typing.

Possibly, the Safari 5 version was buggy, although most of the documentation says that should display using border-radius.

Friends I contacted today, using the latest Safari version, tell me the rounded corners are missing.

The site is located at http://dev.purnelljewellery.co.uk/

4

Hi, JamesICT. I have a shot-in-the-dark suggestion… (I don’t have a Mac).

Your custom stylesheet should be the last stylesheet in the lineup, not the first (or anywhere near it). My clue was the number of !important modifiers in it. They shouldn’t be necessary. If the custom stylesheet were last, they wouldn’t be. It would do its thing in the cascade and override previous styles of equal or less specificity. So the suggestion is to relocate your custom stylesheet, remove the !important modifiers, and see what happens. You may indeed need one or two of the modifiers, but not most. And with luck, you might fix the border-radius issue.

As I said… “a shot in the dark”. :slight_smile:

5

I’ve got Safari version 7.0.3 (which I think is the latest) and the rounded corners are perfect there.

6

[ot]

Is Safari Apples’ way of trying to one-up Microsoft for releasing the most O/S specific browsers with its systems, or was Safari 5 a lemon, or is it significantly outdated? :p[/ot]

7

[ot]

O well, they tried to create a version for Windows, but instead created aversion. :shifty:

was Safari 5 a lemon

I don’t think so. I think it was a browser. :p[/ot]

8

[ot]

…one that should have been elemonated before it was released. :x [/ot]

9
Off Topic:

It wasn’t released … it escaped. :slight_smile: