Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
• 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
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