Border-width

From Frontal Wiki

Purpose

This convenience style sets the top, right, bottom and left border widths for a visual element.

Value

The border-width style accepts 1, 2, 3 or 4 values each of which may be a pixel value, a percentage value, a leftover percentage or "auto".

If one value is specified then the top, right, bottom and left border widths are all set to this value.

If two values are specified then the top and bottom border widths are set to the first value and the left and right border widths are set to the second value.

If three values are specified then the top border width is set to the first value, the left and right border widths are set to the second value and the bottom border width is set to the third value.

If four values are specified then the top border width is set to the first value, the left border width is set to the second value, the bottom border width is set to the third value and the right border width is set to the fourth value.

The default value is 0.

border-width: 10px 10% 15px 15%;

Remarks

See the Frontal's Layout Scheme for a discussion on how borders affect the layout of a visual element particularly with respect to padding and margins.

Example

This example shows an 'img' tag with margins, padding and a border.

<style><![CDATA[
	img
		{
			border-width: 5px 10px 15px 20px;
			width: 100% leftover;
			height: 100% leftover;
			border-color: red;
			margin: 10px;
			padding: 10px;
			background-color: skyblue;
			resize-scale: showmost;
			resize-scale-origin: center middle;
			overflow: hidden;
		}
]]></style>
<img src="http://www.frontalcode.com/assets/images/image_11.jpg" />

Can Be Applied To

This style can be applied to any visual element:

• document
• div
• img
• text
• video
• form
• input