CSS Border

A border is one or more lines that surround the padding and content. When the border is defined as 1px can be seen as a line, the width of more than 1px can be seen as a number of lines.

Border is a composite attribute, commonly used attributes are width, color, style and orientation and so on.

Border Width

Value Description
medium Default
thin Less than the default width
thick Greater than the default width
长度值 A length value consisting of a floating-point number and a unit identifier, not a negative value
#div1 { border-width: 1px 1px 2px 3px; }

This example sets the four azimuth borders to "1px 1px 2px 3px" in the order of "up-right-down-left".

Same as margin, the value support shorthand assignment.

Border color

#div1 { border-color: #FFFFFF; }

Same with border-color, this value supports shorthand assignment, which can be set for each edge attributes.

Border style

The border-style property is used to set the border style.

Value Description
none The default value, no border, border-width attribute is invalid
hidden Hide the border, some IE versions are not supported
dotted Dotted line
dashed Dashed line
solid solid line
double Double border, the two lines and its spacing is equal to the set border-width value
groove According to the value of border-color draw 3D groove
ridge According to the value of border-color 3D convex groove
inset According to the value of border-color 3D concave edge
outset According to the value of border-color 3D convex edge


#div1 { border-style: dashed; }

According to the CSS specification, the border is above the background. If the border style is set to a dotted line or a dashed line, the empty part of the border will show the background.

Border orientation

border-top, border-right, border-bottom, border-left

Each orientation attribute can also be combined with width, color, style to set the edge properties.

border-top-color : /* Set the border color */
border-bottom-style: /* Set the border style */

Composite attributes example

#div1 { border: 1px dashed #999999 ;}

Copyright 2014-2017 by DeveloperTut.com. All Rights Reserved.