Template:Border radius2/doc

From SoftDiamond Wiki
< Template:Border radius2
Revision as of 23:43, 22 February 2023 by SoftDiamond (talk | contribs) (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>. This code was borrowed from https://dwarffortresswiki.org/index.php/Template:Border_radius/doc. ==Examples== <pre> <div style="border: 1px solid black; {{border radius|5px}}">Test</div> </pre> Produces: <div style="border: 1px solid black; {{border radius|5px...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigationJump to search

Template: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 border-radius. This code was borrowed from https://dwarffortresswiki.org/index.php/Template:Border_radius/doc.

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. 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.