CSS Border, our personal favorite CSS attribute, allow you to completely customize the borders that appear around HTML elements. With HTML, it used to be impossible to place a border around an element, except for the table. CSS Borders let you create crisp, customized border styles with very little work, compared to the antiquated methods of HTML.

The CSS border properties define the borders around an element.

The CSS border properties allow you to identify the style and color of an element's border. In HTML we use tables to create borders around a text, but with the CSS border properties we can create borders with nice effects, and it can be applied to any element.

All of the properties for the top border in one declaration :

<!-- created by phpguru.biz -->
p
{
border-top: medium solid #ff0000
}
<!-- created by phpguru.biz -->

How to set different borders on each side of the element?

<!-- created by phpguru.biz -->

p.soliddouble {border-style: solid double}
p.doublesolid {border-style: double solid}
p.groovedouble {border-style: groove double}
p.three {border-style: solid double groove}

<!-- created by phpguru.biz -->

How to set the style of the four borders?

<!-- created by phpguru.biz -->

p.dotted {border-style: solid}
p.dashed {border-style: dashed}
p.solid {border-style: dotted}
p.double {border-style: double}
p.groove {border-style: groove}
p.ridge {border-style: ridge}
p.inset {border-style: inset}
p.outset {border-style: outset}

<!-- created by phpguru.biz -->

Setting the width of the four borders in one declaration?

<!-- created by phpguru.biz -->
p.one
{
border-style: solid;
border-width: 5px
}
p.two
{
border-style: solid;
border-width: thick
}
p.three
{
border-style: solid;
border-width: 5px 10px
}
p.four
{
border-style: solid;
border-width: 5px 10px 1px
}
p.five
{
border-style: solid;
border-width: 5px 10px 1px medium
}
<!-- created by phpguru.biz -->

How to set the color of the four borders. It can have from one to four colors?

<!-- created by phpguru.biz -->
p.one
{
border-style: solid;
border-color: #0000ff
}
p.two
{
border-style: solid;
border-color: #ff0000 #0000ff
}
p.three
{
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff
}
p.four
{
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255)
}
<!-- created by phpguru.biz -->

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.

PHPGURU: The number in the "PHPGURU" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).

Examples

All the top border properties in one declaration
This example demonstrates a shorthand property for setting all of the properties for the top border in one declaration.

All the border properties in one declaration
This example demonstrates a shorthand property for setting all of the properties for the four borders in one declaration, can have from one to three values.

Set different borders on each side
This example demonstrates how to set different borders on each side of the element.

All the bottom border properties in one declaration
This example demonstrates a shorthand property for setting all of the properties for the bottom border in one declaration.

All the left border properties in one declaration
This example demonstrates a shorthand property for setting all of the properties for the left border in one declaration.

All the right border properties in one declaration
This example demonstrates a shorthand property for setting all of the properties for the right border in one declaration.

Set the style of the four borders
This example demonstrates how to set the style of the four borders.

Set the style of the top border
This example demonstrates how to set the style of the top border.

Set the style of the bottom border
This example demonstrates how to set the style of the bottom border.

Set the style of the left border
This example demonstrates how to set the style of the left border.

Set the style of the right  border
This example demonstrates how to set the style of the right border.

All the width of the border properties in one declaration
This example demonstrates a shorthand property for setting the width of the four borders in one declaration, can have from one to four values.

Set the width of the top border
This example demonstrates how to set the width of the top border.

Set the width of the bottom border
This example demonstrates how to set the width of the bottom border.

Set the width of the left border
This example demonstrates how to set the width of the left border.

Set the width of the right border
This example demonstrates how to set the width of the right border.

Set the color of the four borders
This example demonstrates how to set the color of the four borders. It can have from one to four colors.

Set the color of the top border
This example demonstrates how to set the color of the top border.

Set the color of the bottom border
This example demonstrates how to set the color of the bottom border.

Set the color of the left border
This example demonstrates how to set the color of the left border.

Set the color of the right border
This example demonstrates how to set the color of the right border.

---