Home > CSS > Border Propertiesprinter version

CSS Border Properties

CSS border properties apply to the box that surrounds all elements.

Units of Measurement

Units of measurement, when applied to borders, may either be relative or absolute. Absolute units have no real meaning on a computer screen so are not covered here. Relative units include ...

em, en and ex are units historically based on metal type. In style sheets they act as multiples of a default size e.g. If the default size were 10 pixels then 2em would be 20px.
px is straightforwardly a size in pixels which will show as a different physical size on different screen resolutions.

Example of Setting the Border Properties of a Class

.border_class_name {
border-color: #ff0000;
border-width: 2px;
border-style: solid;
}

Property	Description	Values
border−color	Sets the color of all four borders.	none color
border−top−color	Sets the color of the top border.	none color
border−right−color	Sets the color of the right border.	none color
border−bottom−color	Sets the color of the bottom border.	none color
border−left−color	Sets the color of the left border.	none color
border−style	Sets the style of all four borders.	none solid double groove ridge inset outset
border−top−style	Sets the style of the top border.	none solid double groove ridge inset outset
border−right−style	Sets the style of the right border.	none solid double groove ridge inset outset
border−bottom−style	Sets the style of the bottom border.	none solid double groove ridge inset outset
border−left−style	Sets the style of the left border.	none solid double groove ridge inset outset
border−width	Sets the width of all four borders. The width may be thin, medium, thick or length set to units of measurement.	thin medium thick length
border−top−width	Sets the width of the top border. The width may be thin, medium, thick or length set to units of measurement.	thin medium thick length
border−right−width	Sets the width of the right border. The width may be thin, medium, thick or length set to units of measurement.	thin medium thick length
border−bottom−width	Sets the width of the bottom border. The width may be thin, medium, thick or length set to units of measurement.	thin medium thick length
border−left−width	Sets the width of the left border. The width may be thin, medium, thick or length set to units of measurement.	thin medium thick length

Previous - Text Properties Next - Margins and Padding