The Pokémon: Symphonic Evolutions concert tour is coming to Philadelphia on September 19th. Seats are limited, so be sure to book your tickets quick!
Pokémon Omega Ruby and Alpha Sapphire are coming this November! Check BNN and Bulbanews for up-to-date Pokémon news and discuss it on the forums or in our IRC channel.

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