Template:Radius

Template documentation (for the above template, sometimes hidden or invisible)

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.

Visit Template:Radius/doc to edit this text! (How does this work?)