Template:Border radius2: Difference between revisions

From SoftDiamond Wiki
Jump to navigationJump to search
(Created page with "{{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>. ==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-bo...")
 
No edit summary
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==
==Examples==
<pre>
<pre>
Line 16: Line 14:
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.
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>.


<includeonly>[[Category:Formatting Templates]]</includeonly>
<includeonly>[[Category:Formatting Templates]]</includeonly>
<noinclude>[[Category:Template Documentation]]</noinclude>
<noinclude>
[[Category:Template Documentation]]
</noinclude>

Revision as of 22:03, 17 March 2023

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

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.