Template:Border-radius: Difference between revisions

From The Urban Dead Wiki
Jump to navigationJump to search
m (Protected "Template:Border-radius": Requested Protection [edit=sysop:move=sysop])
No edit summary
Line 1: Line 1:
-moz-border-radius:{{{1}}}; -webkit-border-radius:{{{1}}}; -opera-border-radius:{{{1}}}; -o-border-radius:{{{1}}}; -khtml-border-radius:{{{1}}}; border-radius:{{{1}}};<noinclude>
-moz-border-radius:{{{1}}}; -webkit-border-radius:{{{1}}}; -opera-border-radius:{{{1}}}; -o-border-radius:{{{1}}}; -khtml-border-radius:{{{1}}}; border-radius:{{{1}}};<noinclude>


For usage, see talkpage.
==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:
 
* Gecko-Based Browsers
** '''Firefox'''
* Webkit-Based Browsers
** '''Safari'''
** '''Google Chrome'''
* KHTML-Based Browsers
** '''Konqueror'''
* Others
** Opera (though only older versions as they seem to have removed support for it).
 
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]]</noinclude>
[[Category:Utility Templates]]</noinclude>

Revision as of 12:39, 14 December 2008

-moz-border-radius:{{{1}}}; -webkit-border-radius:{{{1}}}; -opera-border-radius:{{{1}}}; -o-border-radius:{{{1}}}; -khtml-border-radius:{{{1}}}; border-radius:{{{1}}};

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:

  • Gecko-Based Browsers
    • Firefox
  • Webkit-Based Browsers
    • Safari
    • Google Chrome
  • KHTML-Based Browsers
    • Konqueror
  • Others
    • Opera (though only older versions as they seem to have removed support for it).

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>