Tutorial 13: CSS Borders

Inherited: No

Border
You can set the color, style and width of the borders around an element in one declaration by using the border property.

border: 1px solid #333333;

Values:

color
style
width

Or you can set each property individually

---

Border Color
You can set the color of a border independently with the border-color property.

border-color: value;

Values:

color name
hexadecimal number
RGB color code
transparent

---

Border Style
You can set the style of a border independently with the border-style property.

border-style: value;

Values:

dashed
dotted
double
groove
hidden
inset
none
outset
ridge
solid

---

Border Width
You can set the width of a border independently with the border-width property.

border-width: value;

Values:

Length
Thin
Medium
Thick

Or you can set the elements for each borders side individually

---

Border Bottom
You can set the color, style and width of the bottom border around an element in one declaration with the border-bottom property.

border-bottom: 1px solid #333333;

Values:

color
style
width

Or you can set each value individually

Border Bottom Color
You can set the color of the bottom border around an element with the border-bottom-color property.

border-bottom-color: value;

Border Bottom Style
You can set the style of the bottom border around an element with the border-bottom-style property.

border-bottom-style: value;

Border Bottom Width
You can set the width of the bottom border around an element with the border-bottom-width property.

border-bottom-width: value;

---

Border Left
You can set the color, style and width of the left border around an element with the border-left property.

border-left: 1px solid #333333;

Values:

color
style
width

Or you can set each value individually

Border Left Color
You can set the color of the left border around an element with the border-left-color property.

border-left-color: value;

Border Left Style
You can set the style of the left border around an element with the border-left-style property.

border-left-style: value;

Border Left Width
You can set the width of the left border around an element with the border-left-width property.

border-left-width: value;

---

Border Right
You can set the color, style and width of the right border around an element in one declaration with the border-right property.
border-right: 1px solid #333333;

Values:

color
style
width

Or you can set each value individually

Border Right Color
You can set the color of the right border around an element with the border-right-color property.

border-right-color: value;

Border Right Style
You can set the style of the right border around an element with the border-right-style property.

border-right-style: value;

Border Right Width
You can set the width of the right border around an element with the border-right-width property.

border-right-width: value;

---

Border Top
You can set the color, style and width of the top border around an element in one declaration with the border-top property.

border-top: 1px solid #333333;

Values:

color
style
width

Or you can set each value individually

Border Top Color
You can set the color of the top border around an element with the border-top-color property.

Border Top Style
You can set the style of the top border around an element with the border-top-style property.

border-top-style: value;

Border Top Width
You can set the width of the top border around an element with the border-top-width property.

border-top-width: value;