Our 2014 Christmas Contests have begun! Check the Bulbagarden Forums to find out how you could win 1 of 30 copies of ORAS!
Please remember to follow the manual of style and code of conduct at all times.
Check BNN and Bulbanews for up-to-date Pokémon news and discuss it on the forums or in our IRC channel #bulbagarden on irc.systemnet.info.

User:Immewnity/Border specifications

From Bulbapedia, the community-driven Pokémon encyclopedia.
Jump to: navigation, search
Bulbapedia logo.png
This article is a proposed policy for Bulbapedia.

Please discuss the proposed policy and suggest possible changes on the article's talk page.


When coding a template, Bulbawiki standards have come to have rounded borders in most templates. The CSS3 specification for accomplishing this is border-radius; however, many popular browsers have taken to using their own specification. At the moment, Gecko-based (i.e. mozilla_firefox.png Mozilla Firefox, Flock_16x16x32.png Flock), WebKit-based (i.e. safari.png Apple Safari, google_chrome_01.png Google Chrome), and Presto-based browsers (i.e. opera-2.png Opera) support a form of this. Other browsers, such as internet_explorer.png Microsoft Internet Explorer, do not currently support this; however, there are workarounds. Reference sites for these specifications can be found below.

border-radius

Browsers using this

  • Newer versions of opera-2.png Opera (older versions used browser-specific code)

Corner formatting

  • border-top-left-radius

-moz-border-radius

Browsers using this

  • Gecko-based browsers (mozilla_firefox.png Mozilla Firefox, Flock_16x16x32.png Flock, etc.)

Corner formatting

  • border-radius-topleft

-webkit-border-radius

Browsers using this

  • WebKit-based browsers (safari.png Apple Safari, google_chrome_01.png Google Chrome, etc.)

Corner formatting

  • -webkit-border-top-left-radius

-khtml-border-radius

Browsers using this

  • KHTML-based browsers (konqueror.png Konquerer, some versions of safari.png Apple Safari)

Corner formatting

  • -khtml-border-top-left-radius

-icab-border-radius

Browsers using this

  • Early versions of icab(16x16).png iCab (newer use WebKit)

Corner formatting

  • -icab-border-top-left-radius

-o-border-radius

Browsers using this

  • Presto-based browsers (opera-2.png Opera)

Corner formatting

  • -o-border-top-left-radius

Unsupported

internet_explorer.png Microsoft Internet Explorer

Even with IE8 released, Internet Explorer has yet to have any form of border-radius implemented. A transition to the CSS3 standard border-radius is planned for IE9. A workaround is found here, which uses an IE specific JavaScript code to create rounded borders.

External links