- 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) |
|||
(3 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
+ | {{documentation subpage}} | ||
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> |
Latest revision as of 23:49, 26 January 2023
This is a documentation subpage for Template:Border radius. It contains usage information, categories and other content that is not part of the original template page. |
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[edit]
<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[edit]
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.