- v50 information can now be added to pages in the main namespace. v0.47 information can still be found in the DF2014 namespace. See here for more details on the new versioning policy.
- Use this page to report any issues related to the migration.
Difference between revisions of "Template:Border radius/doc"
(documentation) |
m |
||
| (2 intermediate revisions by one other user not shown) | |||
| Line 1: | Line 1: | ||
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 <code>border-radius</code>. | 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 <code>border-radius</code>. | ||
| + | |||
| + | ==Examples== | ||
| + | <pre> | ||
| + | <div style="border: 1px solid black; {{border radius|5px}}">Test</div> | ||
| + | </pre> | ||
| + | Produces: | ||
| + | <div style="border: 1px solid black; {{border radius|5px}}">Test</div> | ||
| + | Source: | ||
| + | <pre> | ||
| + | <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> | ||
| + | </pre> | ||
| + | ==Technical== | ||
| + | A semicolon after the template (<code><nowiki>{{border radius|4px}};</nowiki></code>) '''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 <code>top-right-border-radius</code> and <code>-webkit-top-right-border-radius</code> (respectively), while Mozilla uses <code>-moz-border-radius-topright</code>. 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. | This doesn't yet support specific corners, since CSS3 and the Webkit-specific version use <code>top-right-border-radius</code> and <code>-webkit-top-right-border-radius</code> (respectively), while Mozilla uses <code>-moz-border-radius-topright</code>. 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. | ||
| + | |||
| + | <includeonly>[[Category:Formatting Templates]]</includeonly> | ||
| + | <noinclude>[[Category:Template Documentation]]</noinclude> | ||
Revision as of 17:54, 23 July 2013
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.