CSS Border Code Tutorial

CSS can be used to put a border around most HTML elements.

How to set the style of the four borders around an HTML element

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>

<style type="text/css">
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
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;}
</style>

</head>
<body>
<p class="dotted">
This paragraph has a "dotted" style border. </p>
<p class="dashed">
This paragraph has a "dashed" style border. </p>
<p class="solid">
This paragraph has a "solid" style border.
</p>
<p class="double">
This paragraph has a "double" style border.
</p>
<p class="groove">
This paragraph has a "groove" style border.
</p>
<p class="ridge">
This paragraph has a "ridge" style border.
</p>
<p class="inset">
This paragraph has an "inset" style border.
</p>
<p class="outset">
This paragraph has an "outset" style border.
</p>
</body>
</html>

The above HTML and CSS code produces the paragraphs below, each with a different border.

This paragraph has a "dotted" style border.

This paragraph has a "dashed" style border.

This paragraph has a "solid" style border.

This paragraph has a "double" style border.

This paragraph has a "groove" style border.

This paragraph has a "ridge" style border.

This paragraph has an "inset" style border.

This paragraph has an "outset" style border.

Type the HTML and CSS code in the textbox below to practice puting borders around HTML elements.

How to set all of the properties for the four borders in one declaration using a shorthand

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>

<style type="text/css">
p
{
border: medium double rgb(250,0,55);
}
</style>

</head>
<body>
<p>
This paragraph has all of the properties for the four borders set in one declaration using a shorthand.
</p>
</body>
</html>

The above HTML and CSS code make the paragraph below.

This paragraph has all of the properties for the four borders set in one declaration using a shorthand.

How to set the borders on each side of an HTML element

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>

<style type="text/css">

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

</style>
</head>
<body>
<p class="soliddouble">
This paragraph has a "solid double" style border.
</p>
<p class="doublesolid">
This paragraph has a "double solid" style border.
</p>
<p class="groovedouble">
This paragraph has a "groove double" style border.
</p>
<p class="soliddoublegroove">
This paragraph has a "solid double groove" style border.
</p>
</body>
</html>

The above HTML and CSS code produces the paragraphs below.

This paragraph has a "solid double" style border.

This paragraph has a "double solid" style border.

This paragraph has a "groove double" style border.

This paragraph has a "solid double groove" style border.

How to set all of the top border properties in one declaration using a shorthand

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>

<style type="text/css">

p
{
border-top: medium solid #ff0000;
}

</style>
</head>
<body>
<p>
This is a paragraph.
</p>
</body>
</html>

The above HTML and CSS code produces the paragraph below.

This is a paragraph.

How to set the bottom border properties in one declaration using a shorthand

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>

<style type="text/css">

p { border-bottom: medium solid #ff0000;
}

</style>
</head>
<body>
<p>
This is a paragraph.
</p>
</body>
</html>

The above HTML and CSS code produces the paragraph below.

This is a paragraph.

How to set the left border properties in one declaration using a shorthand

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>

<style type="text/css">

p
{
border-left: medium solid #ff0000;
}

</style>
</head>
<body>
<p>
This is a paragraph.
</p>
</body>
</html>

The above HTML and CSS code produces the paragraph below.

This is a paragraph.

How to set the right border properties in one declaration using a shorthand

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>

<style type="text/css">

p
{
border-right: medium solid #ff0000;
}

</style>
</head>
<body>
<p>
This is a paragraph.
</p>
</body>
</html>

The above HTML and CSS code produces the paragraph below.

This is a paragraph.

How to set the style of the top border of an HTML element

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>

<style type="text/css">

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

</style>
</head>
<body>
<p class="dotted">
This paragraph has a "dotted" top border style.
</p>
<p class="dashed">
This paragraph has a "dashed" top border style.
</p>
<p class="solid">
This paragraph has a "solid" top border style.
</p>
<p class="double"> This paragraph has a "double" top border style.
</p>
<p class="groove">
This paragraph has a "groove" top border style.
</p>
<p class="ridge">
This paragraph has a "ridge" top border style.
</p>
<p class="inset">
This paragraph has an "inset" top border style.
</p>
<p class="outset">
This paragraph has an "outset" top border style.
</p>
</body>
</html>

The above HTML and CSS code produces the paragraphs below.

This paragraph has a "dotted" top border style.

This paragraph has a "dashed" top border style.

This paragraph has a "solid" top border style.

This paragraph has a "double" top border style.

This paragraph has a "groove" top border style.

This paragraph has a "ridge" top border style.

This paragraph has an "inset" top border style.

This paragraph has an "outset" top border style.

How to set the bottom border of an HTML element

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>

<style type="text/css">

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

</style>
</head>
<body>
<p class="dotted">
This paragraph has a "dotted" bottom border style.
</p>
<p class="dashed">
This paragraph has a "dashed" bottom border style.
</p>
<p class="solid">
This paragraph has a "solid" bottom border style.
</p>
<p class="double"> This paragraph has a "double" bottom border style.
</p>
<p class="groove">
This paragraph has a "groove" bottom border style.
</p>
<p class="ridge">
This paragraph has a "ridge" bottom border style.
</p>
<p class="inset">
This paragraph has an "inset" bottom border style.
</p>
<p class="outset">
This paragraph has an "outset" bottom border style.
</p>
</body>
</html>

The above HTML and CSS code produces the paragraphs below.

This paragraph has a "dotted" bottom border style.

This paragraph has a "dashed" bottom border style.

This paragraph has a "solid" bottom border style.

This paragraph has a "double" bottom border style.

This paragraph has a "groove" bottom border style.

This paragraph has a "ridge" bottom border style.

This paragraph has an "inset" bottom border style.

This paragraph has an "outset" bottom border style.

How to set the style of the left side of an HTML element

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>

<style type="text/css">

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

</style>
</head>
<body>
<p class="dotted">
This paragraph has a "dotted" left border style.
</p>
<p class="dashed">
This paragraph has a "dashed" left border style.
</p>
<p class="solid">
This paragraph has a "solid" left border style.
</p>
<p class="double"> This paragraph has a "double" left border style.
</p>
<p class="groove">
This paragraph has a "groove" left border style.
</p>
<p class="ridge">
This paragraph has a "ridge" left border style.
</p>
<p class="inset">
This paragraph has an "inset" left border style.
</p>
<p class="outset">
This paragraph has an "outset" left border style.
</p>
</body>
</html>

The above HTML and CSS code produces the paragraphs below.

This paragraph has a "dotted" left border style.

This paragraph has a "dashed" left border style.

This paragraph has a "solid" left border style.

This paragraph has a "double" left border style.

This paragraph has a "groove" left border style.

This paragraph has a "ridge" left border style.

This paragraph has an "inset" left border style.

This paragraph has an "outset" left border style.

How to set the width of the top border

The width of the top border is set using the "border-top-width" property.

Note: The "border-top-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>

<style type="text/css">

p.one
{
border-style: solid;
border-top-width: thin;
}
p.two
{
border-style: solid;
border-top-width: 5px;
}

</style>
</head>
<body>
<p class="one">
This paragraph has a "border-top-width" property with a value of "thin".
</p>
<p class="two">
This paragraph has a "border-top-width" property with a value of "5px".
</p>
</body>
</html>

This paragraph has a "border-top-width" property with a value of "thin".

This paragraph has a "border-top-width" property with a value of "5px".

How to set the width of the bottom border

The width of the bottom border is set using the "border-bottom-width" property.

Note: The "border-bottom-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>

<style type="text/css">

p.one
{
border-style: solid;
border-bottom-width: thin;
}
p.two
{
border-style: solid;
border-bottom-width: 5px;
}

</style>
</head>
<body>
<p class="one">
This paragraph has a "border-bottom-width" property with a value of "thin".
</p>
<p class="two">
This paragraph has a "border-bottom-width" property with a value of "5px".
</p>
</body>
</html>

The above HTML and CSS code produce the paragraphs below.

This paragraph has a "border-bottom-width" property with a value of "thin".

This paragraph has a "border-bottom-width" property with a value of "5px".

How to set the width of the left border

The width of the top border is set using the "border-left-width" property.

Note: The "border-left-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>

<style type="text/css">

p.one
{
border-style: solid;
border-left-width: thin;
}
p.two
{
border-style: solid;
border-left-width: 5px;
}

</style>
</head>
<body>
<p class="one">
This paragraph has a "border-left-width" property with a value of "thin".
</p>
<p class="two">
This paragraph has a "border-left-width" property with a value of "5px".
</p>
</body>
</html>

The above HTML and CSS code produce the paragraphs below.

This paragraph has a "border-left-width" property with a value of "thin".

This paragraph has a "border-left-width" property with a value of "5px".

How to set the width of the right border

The width of the top border is set using the "border-right-width" property.

Note: The "border-right-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>

<style type="text/css">

p.one
{
border-style: solid;
border-right-width: thin;
}
p.two
{
border-style: solid;
border-right-width: 5px;
}

</style>
</head>
<body>
<p class="one">
This paragraph has a "border-right-width" property with a value of "thin".
</p>
<p class="two">
This paragraph has a "border-right-width" property with a value of "5px".
</p>
</body>
</html>

The above HTML and CSS code produce the paragraphs below.

This paragraph has a "border-right-width" property with a value of "thin".

This paragraph has a "border-right-width" property with a value of "5px".

How to set the width of the border properties in one declaration using a shorthand

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>

<style type="text/css">

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;
}

</style>
</head>
<body>
<p>
This paragraph has a "border-top-color" property with a value of "#ff0000".
</p>
</body>
</html>

The above HTML and CSS code produces the paragraph below.

This paragraph has a "border-top-color" property with a value of "#ff0000".

This is paragraph "two".

This is paragraph "three".

This is paragraph "four".

This is paragraph "five".

How to set the color of the top border of an HTML element

The color of the top border is set using the "border-top-color" property.

Note: The "border-top-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>

<style type="text/css">

p
{
border-style: solid;
border-top-color: #ff0000;
}

</style>
</head>
<body>
<p class="one">
This paragraph has a "border-top-color" property with a value of "#ff0000".
</p>
</body>
</html>

The above HTML and CSS code produces the paragraphs below.

This paragraph has a "border-top-color" property with a value of "#ff0000".

How to set the color of the top border of an HTML element

The color of the top border is set using the "border-top-color" property.

Note: The "border-top-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>

<style type="text/css">

p
{
border-style: solid;
border-top-color: #ff0000;
}

</style>
</head>
<body>
<p class="one">
This paragraph has a "border-top-color" property with a value of "#ff0000".
</p>
</body>
</html>

The above HTML and CSS code produces the paragraphs below.

This paragraph has a "border-top-color" property with a value of "#ff0000".

How to set the color of the bottom border of an HTML element

The color of the top border is set using the "border-bottom-color" property.

Note: The "border-bottom-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>

<style type="text/css">

p
{
border-style: solid;
border-bottom-color: #ff0000;
}

</style>
</head>
<body>
<p class="one">
This paragraph has a "border-bottom-color" property with a value of "#ff0000".
</p>
</body>
</html>

The above HTML and CSS code produces the paragraphs below.

This paragraph has a "border-bottom-color" property with a value of "#ff0000".

How to set the color of the left border of an HTML element

The color of the left border is set using the "border-left-color" property.

Note: The "border-left-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>

<style type="text/css">

p
{
border-style: solid;
border-left-color: #ff0000;
}

</style>
</head>
<body>
<p class="one">
This paragraph has a "border-left-color" property with a value of "#ff0000".
</p>
</body>
</html>

The above HTML and CSS code produces the paragraphs below.

This paragraph has a "border-left-color" property with a value of "#ff0000".

How to set the color of the right border of an HTML element

The color of the right border is set using the "border-right-color" property.

Note: The "border-right-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>

<style type="text/css">

p
{
border-style: solid;
border-right-color: #ff0000;
}

</style>
</head>
<body>
<p class="one">
This paragraph has a "border-right-color" property with a value of "#ff0000".
</p>
</body>
</html>

The above HTML and CSS code produces the paragraphs below.

This paragraph has a "border-right-color" property with a value of "#ff0000".

How to set the color of the four borders of an HTML element in one declaration

Learn how to set the color of the four borders of an HTML element in one declaration using the "border-color" property.

Note: The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>

<style type="text/css">

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);
}

</style>
</head>
<body>
<p class="one">
This paragraph has a one color border.
</p>
<p class="two">
This paragraph has a two color border.
</p>
<p class="three">
This paragraph has a three color border.
</p>
<p class="four">
This paragraph has a four color border.
</p>
</body>
</html>

The above HTML and CSS code produces the paragraphs below.

This paragraph has a one color border.

This paragraph has a two color border.

This paragraph has a three color border.

This paragraph has a four color border.