Template:Border-radius/doc
 | 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 template is a shortcut for producing rounded corners. It generates the CSS for various browsers. Supported browsers are the current versions of Opera, Firefox, Safari, Chrome and Internet Explorer.
| Parameter | Description | Type | Status | |
|---|---|---|---|---|
| radius | 1 | The border radius. Use one CSS length value to set all corners equally, or four to specify them one by one (top-left, top-right, bottom-right and bottom-left, respectively). Do not use two or three values, as this results in different rendering between various browsers.
| Line | required |
Usage
Insert this template within a style tag of any block-style element:
{{border-radius | radius1 [radius2 radius3 radius4]}}
- If one value is set, this radius applies to all 4 corners.
- If four values are set, they apply to the top-left, top-right, bottom-right, bottom-left corner in that order.
Do not use two or three values, as this results in different rendering between various browsers.
Example
<div style="background-color: #FFFFDD; border: 1px solid #808000; padding: 5px; {{border-radius|16px 8px 16px 8px}}">Lorem ipsum...</div>will produce:
See also
- {{box-shadow}}
- {{linear-gradient}}
- {{radial-gradient}}