css3 zaobljeni rubovi

Question

Jano mi je da u css3 postoji mogućnost zaobljenih rubova na ovaj način:

-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;

Da li mi netko može točno objasniti koji browseri/preglednici podržavaju ovo?

Answer 1

Prije nekog vremena naiđoh na ovaj članak na tu temu CSS Rounded Corners In All Browsers (With No Images). U vrijeme pisanja članka je vrijedilo:

• moz-border-radius za Firefox
• -webkit-border-radius za Chrome/Safari
• border-radius je predviđen za vrijeme kada će ga svi browseri koristiti, ali vidim da ga FF8 i Chrome 16.x koriste bez -moz-/-webkit-. možda i Safari i Opera...

Comments

Thnx Toril :)

Answer 2

Ovo je moj mali doprinos:

/* Firefox 3.5+, Safari 3.0+, Opera 10.5+, Chrome 4.1+, IE 9.0+ početak */
-webkit-border-radius: 5px; /* Safari i Chrome */
-moz-border-radius: 5px; /* Firefox */
border-radius: 5px; /* za budućnost spremni ;) */

-khtml-border-radius: 5px; /* stari Konqueror */

/* firefox pojedinačno */
-moz-border-radius-topleft: 5px; /* top left */
-moz-border-radius-topright: 5px; /* top right */
-moz-border-radius-bottomleft: 5px; /* bottom left */
-moz-border-radius-bottomright: 5px; /* bottom right */
-moz-border-radius: 5px 5px 5px 5px / 5px 5px 5px 5px; /* [horizontalni radijus] / [vertikalni radijus] */
-moz-border-radius:5px 5px 5px 5px;  /* skraćeno topleft topright bottomright bottomleft */

/* webkit's pojedinačno */
-webkit-border-top-left-radius:5px; /* top left */
-webkit-border-top-right-radius:5px; /* top right */
-webkit-border-bottom-left-radius:5px; /* bottom left */
-webkit-border-bottom-right-radius:5px; /* bottom right */
-webkit-border-radius: 5px 5px 5px 5px; /* skraćeno topleft topright bottomright bottomleft */

Pregled kompatibilnosti browsera: