Template:Radius/doc

Use this template to add border radius to an element within all supported browsers.

Usage

Place the following within the style definition in an html element:

{{Radius{{#ifeq: TopLeft|---|||<TopLeft>}}{{#ifeq: TopRight|---|||<TopRight>}}{{#ifeq: BottomLeft|---|||<BottomLeft>}}{{#ifeq: BottomRight|---|||<BottomRight>}}{{#ifeq: ---|---|||<--->}}{{#ifeq: ---|---|||<--->}}{{#ifeq: ---|---|||<--->}}{{#ifeq: ---|---|||<--->}}{{#ifeq: ---|---|||<--->}}{{#ifeq: ---|---|||<--->}}{{#ifeq: ---|---|||<--->}}{{#ifeq: ---|---|||<--->}}{{#ifeq: ---|---|||<--->}}{{#ifeq: ---|---|||<--->}}{{#ifeq: ---|---|||<--->}}{{#ifeq: ---|---|||<--->}}{{#ifeq: ---|---|||<--->}}{{#ifeq: ---|---|||<--->}}{{#ifeq: ---|---|||<--->}}{{#ifeq: ---|---|||<--->}}}}

About the parameters

• unnamed parameter 1 - The radius value for the top left corner of the element.
  • This is the default value for all parameters if the others are not defined.
• unnamed parameter 2 - The radius value for the top right corner of the element.
• unnamed parameter 3 - The radius value for the bottom left corner of the element.
• unnamed parameter 4 - The radius value for the bottom right corner of the element.
  • This will default to value of the second parameter if not defined.

Examples

Only top edges rounded

<div style="{{Radius|5px|5px|0px|0px}} border:1px solid gray;background-color: #0E192D;padding:10px;">
This is a box with only the top  edges rounded.
</div>

This is a box with only the top edges rounded.

Left edges different from right edges

<div style="{{Radius|8px|30px}} border:1px solid gray;background-color: #0E192D;padding:10px;">
The right edges of this box are more rounded than the left edges.
</div>

The right edges of this box are more rounded than the left edges.

All edges rounded equally

<div style="{{Radius|10px}} border:1px solid gray;background-color: #0E192D;padding:10px;">
All edges of this box are equally rounded.
</div>

All edges of this box are equally rounded.

Details

• This template uses the subtemplate {{Radius-edge{{#ifeq: ---|---|||<--->}}{{#ifeq: ---|---|||<--->}}{{#ifeq: ---|---|||<--->}}{{#ifeq: ---|---|||<--->}}{{#ifeq: ---|---|||<--->}}{{#ifeq: ---|---|||<--->}}{{#ifeq: ---|---|||<--->}}{{#ifeq: ---|---|||<--->}}{{#ifeq: ---|---|||<--->}}{{#ifeq: ---|---|||<--->}}{{#ifeq: ---|---|||<--->}}{{#ifeq: ---|---|||<--->}}{{#ifeq: ---|---|||<--->}}{{#ifeq: ---|---|||<--->}}{{#ifeq: ---|---|||<--->}}{{#ifeq: ---|---|||<--->}}{{#ifeq: ---|---|||<--->}}{{#ifeq: ---|---|||<--->}}{{#ifeq: ---|---|||<--->}}{{#ifeq: ---|---|||<--->}}}}.
• The "border-radius" CSS property is supported by Internet Explorer version 9 and later, Firefox version 4 and later, Safari version 5 and later, as well as all versions of Chrome and Opera.