CSS BORDER PROPERTIES

• The CSS border properties allow you to specify the style, width, and color of
an element's border.
1. Border Style
o The border-style property specifies what kind of border to display.
o The following values are allowed:
 dotted - Defines a dotted border
 dashed - Defines a dashed border
 solid - Defines a solid border
 double - Defines a double border
 groove - Defines a 3D grooved border. The effect depends on the border-color value
  ridge - Defines a 3D ridged border. The effect depends on the border-color value
 inset - Defines a 3D inset border. The effect depends on the border-color value
 outset - Defines a 3D outset border. The effect depends on the border-color value
 none - Defines no border
 hidden - Defines a hidden border
o The border-style property can have from one to four values (for the top border,
right border, bottom border, and the left border).
Example
p{border-style: dotted;}
2. Border Width
o The border-width property specifies the width of the four borders.
o The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of
the three pre-defined values: thin, medium, or thick.
o The border-width property can have from one to four values (for the top border,
right border, bottom border, and the left border).
Example
• p{border-width: 5px;}
• p{border-width: medium;}
• p{border-width: 2px 10px 4px 20px;}
3. Border Color
o The border-color property is used to set the color of the four borders.
o The border-color property can have from one to four values (for the top border,
right border, bottom border, and the left border).
o The border-color can be any color defined by RGB, hexadecimal or key terms.
Below is an example of each of these types:
o If border-color is not set, it inherits the color of the element.
Example
p{border-style: solid; border-color: red;}
p{border-style: solid; border-color: red green blue yellow;}
Note: The "border-color" property does not work if it is used alone. Use the
"border-style" property to set the borders first.
5. Border
o Sets all the border properties in one declaration
o The border property is a shorthand property for:
 border-width
 border-style (required)
 border-color
Example
h1 {
border: 5px solid red;
}
Property Values

Value Description
border-width Specifies the width of the border. Default value is
"medium"
border-style Specifies the style of the border. Default value is "none"
border-color Specifies the color of the border. Default value is the
color of the text
initial Sets this property to its default value.
6. border-bottom
o Sets all the bottom border properties in one declaration
o The border-bottom property is a shorthand property for (in the following
order):
 border-bottom-width
 border-bottom-style
 border-bottom-color
Example
h1 {
border-bottom: 5px solid red;
}
Property Values
Value Description
border-bottom- Required. Specifies the width of the bottom border.
width Default value is "medium"
border-bottom- Required. Specifies the style of the bottom border.
style Default value is "none"
border-bottom- Optional. Specifies the color of the bottom border.
color Default value is the color of the text
initial Sets this property to its default value.
7. border-bottom-color
o Sets the color of the bottom border
o The border-bottom-color property sets the color of an element's bottom
border.
Example
div {border-bottom-color: #92a8d1;}
Property Values

Value Description
color Specifies the background color. Look
at CSS Color Values for a complete list
of possible color values. Default color is
the color of the element
transparen Specifies that the border color should
t be transparent
initial Sets this property to its default value.
8. border-bottom-style
o Sets the style of the bottom border
o The border-bottom-style property sets the style of an element's bottom
border.
Example
div {border-bottom-style: dotted;}
Value Description
Property Values
none Specifies no border. This is default
hidde The same as "none", except in border
n conflict resolution for table elements
dotte Specifies a dotted border
d
dashe Specifies a dashed border
d
solid Specifies a solid border

double Specifies a double border

groove Specifies a 3D grooved border. The

effect depends on the border-color
value

ridge Specifies a 3D ridged border. The

effect depends on the border-color
value

inset Specifies a 3D inset border. The effect

depends on the border-color value

outset Specifies a 3D outset border. The

effect depends on the border-color
value

initial Sets this property to its default value.

9. border-bottom-width
o Sets the width of the bottom border
o The border-bottom-width property sets the width of an element's bottom
border.
Example
div {border-bottom-width: thin;}
Property Values
Value Description
medium Specifies a medium bottom
border. This is default
thin Specifies a thin bottom border
thick Specifies a thick bottom border
length Allows you to define the
thickness of the bottom border.
initial Sets this property to its default
value.
10. border-color
o Sets the color of the four borders
o The border-color property sets the color of an element's four borders. This
property can have from one to four values.
o If the border-color property has four values:
border-color: red green blue pink;
top border is red, right border is green, bottom border is blue, left border is pink
o If the border-color property has three values:
border-color: red green blue;
top border is red, right and left borders are green, bottom border is blue
o If the border-color property has two values:
border-color: red green;
top and bottom borders are red, right and left borders are green
o If the border-color property has one value:
border-color: red;
all four borders are red
Example
div {border-color: coral;}
Property Values
Value Description
color Specifies the background color.
Default color is black
transpar Specifies that the border color
ent should be transparent
initial Sets this property to its default
value.
11. border-left
o Sets all the left border properties in one declaration
o The border-left property is a shorthand property for (in the following order):
 border-left-width
 border-left-style (required)
 border-left-color
Example
h1 {
border-left: 5px solid red;
}
Property Values
Value Description
border-left-width Optional. Specifies the width of the left border. Default
value is "medium"
border-left-style Required. Specifies the style of the left border. Default
value is "none"
border-left-color Optional. Specifies the color of the left border. Default
value is the color of the text
initial Sets this property to its default value.
12. border-left-color
o Sets the color of the left border
o The border-left-color property sets the color of an element's left border.
Example
div {border-left-color: coral;}
Property Values
Value Description
color Specifies the color of the left
border. Default color is the color
of the element
transpar Specifies that the border color
ent should be transparent
initial Sets this property to its default
value.
13. border-left-style
o Sets the style of the left border
o The border-left-style property sets the style of an element's left border.
Example
div {border-left-style: dashed;}
Property Values Valu Description
e
none Specifies no border. This is default
hidd The same as "none", except in
en border conflict resolution for
table elements
dotte Specifies a dotted border
d
dash Specifies a dashed border
ed
solid Specifies a solid border
double Specifies a double border

groove Specifies a 3D grooved border. The

effect depends on the border-color
value

ridge Specifies a 3D ridged border. The

effect depends on the border-color
value

inset Specifies a 3D inset border. The

effect depends on the border-color
value

outset Specifies a 3D outset border. The

effect depends on the border-color
value

initial Sets this property to its default

value.
14. border-left-width
o Sets the width of the left border
o The border-left-width property sets the width of an element's left border.
Example
div {border-left-width: thin;}
Property Values
Value Description
medium Specifies a medium left border.
This is default
thin Specifies a thin left border
thick Specifies a thick left border
length Allows you to define the
thickness of the left border.
initial Sets this property to its default
value.
15. border-radius
o Sets all the four border-*-radius properties for rounded corners
o The border-radius property defines the radius of the element's corners.
o This property can have from one to four values. Here are the rules:
 Four values - border-radius: 15px 50px 30px 5px; (first value applies to top-left corner,
second value applies to top-right corner, third value applies to bottom-right corner,
and fourth value applies to bottom-left corner)
 Three values - border-radius: 15px 50px 30px; (first value applies to top-left corner,
second value applies to top-right and bottom-left corners, and third value applies to
bottom-right corner)
 Two values - border-radius: 15px 50px; (first value applies to top-left and bottom-right
corners, and the second value applies to top-right and bottom-left corners)
 One value - border-radius: 15px; (the value applies to all four corners, which are
rounded equally
Property Values

Value Description
length Defines the shape of the corners. Default value is
0.
% Defines the shape of the corners in %
initial Sets this property to its default value.
16. border-right
o Sets all the right border properties in one declaration
o The border-right property is a shorthand property for (in the following order):
 border-right-width
 border-right-style (required)
 border-right-color
Example
div {
border-right: double;
}
Property Values
Value Description
border-right- Required. Specifies the width of the right border. Default
width value is "medium"
border-right-style Required. Specifies the style of the right border. Default
value is "none"
border-right- Optional. Specifies the color of the right border. Default
color value is the color of the text
initial Sets this property to its default value.
17. border-right-color
o Sets the color of the right border
o The border-right-color property sets the color of an element's right border.
Example
div {border-right-color: coral;}
Property Values
Value Description
color Specifies the color of the right
border.Default color is black
transpar Specifies that the border color
ent should be transparent
initial Sets this property to its default
value.
18. border-right-style
o The border-right-style property sets the style of an element's right border.
Example
div {border-right-style: dashed;}
Property Values Value Description

none Specifies no border. This is default

hidden The same as "none", except in border conflict
resolution for table elements

dotted Specifies a dotted border

dashed Specifies a dashed border

solid Specifies a solid border

double Specifies a double border

groove Specifies a 3D grooved border. The effect depends

on the border-color value
ridge Specifies a 3D ridged
border. The effect
depends on the border-
color value
inset Specifies a 3D inset
border. The effect
depends on the border-
color value
outset Specifies a 3D outset
border. The effect
depends on the border-
color value
initial Sets this property to its
default value
19. border-right-width
o Sets the width of the right border
o The border-right-width property sets the width of an element's right border.
Example
div {border-right-width: medium;}
Property Values Value Description
medium Specifies a medium right
border. This is default
thin Specifies a thin right border
thick Specifies a thick right border
length Allows you to define the
thickness of the right border.
initial Sets this property to its default
value.
20. border-top
o The border-top shorthand property sets all the top border properties in one
declaration.
o The properties that can be set must be in the following order:
 border-top-width
 border-top-style (required)
 border-top-color
Example
h1 {
border-top: 5px solid red;
}
Property Values
Value Description
border-top- Required. Specifies the width of the top border.
width Default value is "medium"
border-top- Required. Specifies the style of the top border.
style Default value is "none"
border-top- Optional. Specifies the color of the top border.
color Default value is the color of the text
initial Sets this property to its default value
21. border-top-color
o The border-top-color property sets the color of an element's top border.
Example
div {border-top-color: coral;}
Value Description
Property Values
color Specifies the color of the
top border.Default color is
the color of the element
transpa Specifies that the border
rent color should be transparent
initial Sets this property to its
default value.
22. border-top-style
o The border-top-style property sets the style of an element's top border.
Example
div {border-top-style: dotted;}
Property Values
none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initi
al;
23. border-top-width
o The border-top-width property sets the width of an element's top border.
Example
div {border-top-width: thin;}
Property Values
border-top-width: medium|thin|thick|length|initial;