v50 Steam/Premium information for editors
- 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.
This notice may be cached—the current version can be found here.
Difference between revisions of "Template:Border radius/doc"
Jump to navigation
Jump to search
(documentation) |
m (examples) |
||
| 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== | ||
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. | ||
Revision as of 13:54, 23 February 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:
Test
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
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.