Template:Border-radius: Difference between revisions
From The Urban Dead Wiki
Jump to navigationJump to search
(cross-browser compatibility FTW!) |
(example and typos) |
||
| Line 1: | Line 1: | ||
<includeonly>-moz-border-radius:{{{1}}}; -webkit-border-radius:{{{1}}}; -opera-border-radius:{{{1}}}; border-radius:{{{1}}};</includeonly><noinclude> | <includeonly>-moz-border-radius:{{{1}}}; -webkit-border-radius:{{{1}}}; -opera-border-radius:{{{1}}}; border-radius:{{{1}}};</includeonly><noinclude> | ||
==Usage== | ==Usage== | ||
This template is for making round corners to tables and such in a way that is compatible with all the browsers that support them, which at the moment are: Firefox (and other Gecko-based browsers), Safari and Chrome (and other Webkit-based | This template is for making round corners to tables and such in a way that is compatible with all the browsers that support them, which at the moment are: Firefox (and other Gecko-based browsers), Safari and Chrome (and other Webkit-based browsers) and Opera (and its derivates). | ||
To get those pretty corners, use | To get those pretty corners, just use this template in the style attribute of the thing you want rounded instead of <tt>-*-border-radius:amount</tt>. | ||
<div style="background: black; color: grey; padding: 1px 4px; {{border-radius|8px}}"> | |||
This box was created with the following code: | |||
<pre> | |||
<div style="background: black; color: grey; padding: 1px 4px; {{border-radius|8px}}"> | |||
Here be contents... | |||
</div> | |||
</pre> | |||
</div> | |||
[[Category:Utility Templates]] | [[Category:Utility Templates]] | ||
</noinclude> | </noinclude> | ||
Revision as of 17:24, 15 October 2008
Usage
This template is for making round corners to tables and such in a way that is compatible with all the browsers that support them, which at the moment are: Firefox (and other Gecko-based browsers), Safari and Chrome (and other Webkit-based browsers) and Opera (and its derivates).
To get those pretty corners, just use this template in the style attribute of the thing you want rounded instead of -*-border-radius:amount.
This box was created with the following code:
<div style="background: black; color: grey; padding: 1px 4px; {{border-radius|8px}}">
Here be contents...
</div>
