Difference between revisions of "Template:Border radius"
(Created page with "<includeonly>border-radius: {{{1}}}; -webkit-border-radius: {{{1}}}; -moz-border-radius: {{{1}}}; -o-border-radius: {{{1}}}; -ms-border-radius: {{{1}}};</includeonly><noinclud...") |
m (4 revisions imported: Importing old wiki) |
||
| (2 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<includeonly>border-radius: {{{1}}}; -webkit-border-radius: {{{1}}}; -moz-border-radius: {{{1}}}; -o-border-radius: {{{1}}}; -ms-border-radius: {{{1}}};</includeonly><noinclude> | <includeonly>border-radius: {{{1}}}; -webkit-border-radius: {{{1}}}; -moz-border-radius: {{{1}}}; -o-border-radius: {{{1}}}; -ms-border-radius: {{{1}}};</includeonly><noinclude> | ||
| − | {{ | + | {{doc}} |
</noinclude> | </noinclude> | ||
Latest revision as of 14:50, 24 May 2018
(view - edit - history - purge) Documentation
This is intended to be used in a CSS context as a shorter way of expressing border radii. It uses several vendor-specific prefixes, as well as the standard CSS3 border-radius.
Examples
<div style="border: 1px solid black; {{border radius|5px}}">Test</div>
Produces:
Source:
<div style="border: 1px solid black; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px;">Test</div>
Technical
A semicolon after the template ({{border radius|4px}};) is not necessary. This template ends with a semicolon. Extra semicolons could cause problems in a few browsers.
This doesn't yet support specific corners, since CSS3 and the Webkit-specific version use top-right-border-radius and -webkit-top-right-border-radius (respectively), while Mozilla uses -moz-border-radius-topright. Feel free to implement this (it shouldn't be too hard), but please test it on your user page or at /Sandbox before changing this template. Bad CSS on the main page is not good.
