「テンプレート:Border-radius」の版間の差分

Template documentation[view] [edit] [history] [purge]

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

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