CSS: Border

Border syntax

border: style width color

border is shorthand for

• border-style
• border-width
• border-color

Sample code:

.x {
 border: solid 2px red;
}

Default values

if a value is missing, it default to:

• border-style → none
• border-width → medium (which is 3px)
• border-color → current color.

border-style

Border on just one side

Border can be applied to a side only.

The properties are:

• border-top: solid 5px red
• border-bottom: solid 5px red
• border-left: solid 5px red
• border-right: solid 5px red

Example

.border3072 {
 display: inline-block;
 border-bottom: dotted 5px red;
}

sample. border with round corners

• CSS: Round Corners

border-width

border-width: thin;

same as 1px.

border-width: medium;

same as 3px.

border-width: thick;

same as 5px.

border-image

xtodo

• border-image
• border-image-outset
• border-image-repeat
• border-image-slice
• border-image-source
• border-image-width

other border properties

• border-collapse
• border-color
• border-radius
• border-spacing
• border-style
• border-width
• border

border side properties

• border-bottom
• border-bottom-color
• border-bottom-left-radius
• border-bottom-right-radius
• border-bottom-style
• border-bottom-width
• border-left
• border-left-color
• border-left-style
• border-left-width
• border-right
• border-right-color
• border-right-style
• border-right-width
• border-top
• border-top-color
• border-top-left-radius
• border-top-right-radius
• border-top-style
• border-top-width