Tutorials
Learn web design and programming with our free video and text tutorials.
Web Designer? Design and market your own professional website with easy-to-use tools.
CSS Border Tutorials
How To Specify the Border Style of Elements with CSS
The border-style property allows you to specify the border style of HTML elements with CSS.
| Property | Values |
|---|---|
| border-style | none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset |
The code below creates the paragraphs below.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
<link rel="stylesheet" type="text/css" href="" media="screen,projection" />
<style type="text/css">
.dotted { border-style:dotted; }
.dashed { border-style:dashed; }
.solid { border-style:solid; }
.double { border-style:double; }
.groove { border-style:groove; }
.ridge { border-style:ridge; }
.inset { border-style:inset; }
.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 code above produces the paragraphs below.
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.
How To Specify the Border Width of Elements with CSS
border-width properties allow you to specify the border width of HTML elements.
Border width properties allow for the use of any length vlaues (em, pixel, centimeter, etc.) and the values thin, medium, thick however, they do not allow the use of percentage values. In real world practice, only length values are used.
The border-width property sets the width of all of the borders on each side of an HTML element.
The border-top-width, border-right-width, border-bottom-width and the border-left-width properties set the borders of the individual sides of an (X)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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
<link rel="stylesheet" type="text/css" href="" media="screen,projection" />
<style type="text/css">
.all { border-width:10px; border-color:#000; border-style:solid; margin:15px 0 15px 0; }
.top { border-top-width:10px; border-color:#000; border-style:solid; margin:15px 0 15px 0; }
.right { border-right-width:10px; border-color:#000; border-style:solid; margin:15px 0 15px 0; }
.bottom { border-bottom-width:10px; border-color:#000; border-style: solid; margin:15px 0 15px 0; }
.left { border-left-width:10px; border-color:#000; border-style:solid; margin:15px 0 15px 0; }
</style>
</head>
<body>
<p class="all">
This paragraph has a border width of 10px on each side.
</p>
<p class="top">
This paragraph has a top border width of 10px.
</p>
<p class="right">
This paragraph has a right border width of 10px.
</p>
<p class="bottom">
This paragraph has a bottom border width of 10px.
</p>
<p class="left>
This paragraph has a left border width of 10px.
</p>
</body>
</html>
The code above produces the paragraphs below.
This paragraph has a border width of 10px on each side.
This paragraph has a top border width of 10px.
This paragraph has a right border width of 10px.
This paragraph has a bottom border width of 10px.
This paragraph has a left border width of 10px.
How To Specify the Border Color of Elements with CSS
The border-style properties allows you to specify the color of the border of HTML elements with CSS and accepts any <color> value, which means that it accepts a color keyword, a hexadecimal value, a short hexadecimal value or an RGB value.
The border-color property allows you to specify the color of the border for each side of an HTML element.
The border-top-color, border-right-color, border-bottom-color and border-left-color properties are used to specify a color for each individual 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
<link rel="stylesheet" type="text/css" href="" media="screen,projection" />
<style type="text/css">
.all { border-color:red; border-style:solid; }
.top { border-top-color:red; border-style:solid; }
.right { border-right-color:red; border-style:solid; }
.bottom { border-bottom-color:red; border-style:solid; }
.left { border-left-color:red; border-style:solid; }
</style>
</head>
<body>
<p class="all">
This paragraph has a red colored border on each side.
</p>
<p class="top">
This paragraph has a red colored top border.
</p>
<p class="right">
This paragraph has a red colored right border.
</p>
<p class="bottom">
This paragraph has a red colored bottom border.
</p>
<p class="left">
This paragraph has a red colored left border.
</p>
</body>
</html>
The code above produces the paragraphs below.
This paragraph has a red colored border on each side.
This paragraph has a red colored top border.
This paragraph has a red colored right border.
This paragraph has a red colored bottom border.
This paragraph has a red colored left border.