Template:Bevel
Documentation
This can be embedded into an element's style to give the element beveled edges. The bg_color parameter takes the background color of the element and size takes the size of the bevel (the midpoint of the bevel line is size units away from the corner being beveled). For example, <div style="{{Bevel|bg_color=#ff0000|size=10px}}padding:10px;">hi</div> will produce the following:
Note that padding:10px and width:200px is added as well. The padding is not necessary, it just makes the element look more presentable. Likewise, when the width is set to a percentage, the right corners are beveled differently based on the parent object's (or window's) width. Here's what it looks like without the padding or width defined:
If you want to set different size values for each corner, you can use the tl, tr, bl, and br parameters for the top left, top right, bottom left, and bottom right corners. For example, <div style="{{Bevel|bg_color=#ff0000|tl=10px|tr=5px|bl=2px|br=0px}}padding:10px;">hi</div> produces the following:
The effect is accomplished by using four different background gradients, one for each corner. Unfortunately, Chrome leaves a gap between the gradients if the element has an odd width or height. This is circumvented by making each gradient have a width and height of (50% + 1px), but it means the gradients overlap and thus backgrounds that are not fully opaque won't look good.