CSS border properties

With CSS border properties, you can specify how borders appear around elements.

This lesson focuses on:

Setting the style of a border
Setting the width of a border
Setting the color of a border

Setting the style of a border

The style of a border is set with the border-style property.

Possible values for the border-style property:

dotted
solid
groove
double
outset

Example:

<html>
<head>
<title>Lists</title>
<style type="text/css">
<!--
h1 {border-style: dashed;}
h2 {border-style: double;}
p {border-style: dotted;}
a {border-style: groove;}
-->
</style>
</head>
<body>
<h1>This text has a dashed border</h1>
<br />
<h2>This text has a double border</h2>
<br />
<p>
This text has a dotted border
</p>
<br />
<a href="http://www.landofcode.com">
This text has a groove border
</a>
</body>
</html>

Output:

This text has a dashed border

This text has a double border

This text has a dotted border

This text has a groove border

In the above example, text declared with the <h1> heading tag is set to have a dashed border. Text declared with the <h2> heading tag is set to have a double border. Text declared with the <p> tag is set to have a dotted border. Links are set to have a groove border.

Setting the width of a border

The width of a border is set with the border-width property. The values you can assign to this attribute include "thin", "medium", "thick", or a custom value.

Example:

<html>
<head>
<title>Lists</title>
<style type="text/css">
<!--
h1 {border-style: dashed; border-width: thin;}
h2 {border-style: double; border-width: medium;}
p {border-style: dotted; border-width: thick;}
a {border-style: groove; border-width: 10px;}
-->
</style>
</head>
<body>
<h1>This text has a dashed border</h1>
<br />
<h2>This text has a double border</h2>
<br />
<p>
This text has a dotted border
</p>
<br />
<a href="http://www.landofcode.com">
This text has a groove border 
that has a thickness of 10 pixels
</a>
</body>
</html>

Output:

This text has a thin dashed border

This text has a medium double border

This text has a thick dotted border

This text has a groove border that has a thickness of 10 pixels

In the above example, text declared with the <h1> heading tag is set to have a thin and dashed border. Text declared with the <h2> heading tag is set to have a medium and double border. Text declared with the <p> tag is set to have a thick and dotted border. Links are set to have a groove border that has a thickness of 10 pixels.

Setting the color of a border

The color of a border is set with the border-color property. The values you can assign to this attribute include a color name, a hex value, an RGB value, or the word "transparent" for transparent color.

Example:

<html>
<head>
<title>Lists</title>
<style type="text/css">
<!--
h1 {border-style: dashed; border-color: green;}
h2 {border-style: double; border-color: #556B2F;}
p {border-style: dotted; border-width: rgb(128, 128, 128);}
a {border-style: groove; border-color: transparent;}
-->
</style>
</head>
<body>
<h1>This text has a green dashed border</h1>
<br />
<h2>This text has a darkolivegreen double border</h2>
<br />
<p>
This text has a gray dotted border
</p>
<br />
<a href="http://www.landofcode.com">
This text has a transparent groove border
</a>
</body>
</html>

Output:

This text has a green dashed border

This text has a darkolivegreen double border

This text has a gray dotted border

This text has a transparent groove border

In the above example, text declared with the <h1> heading tag is set to have a green and dashed border. Text declared with the <h2> heading tag is set to have a darkolivegreen and double border. Text declared with the <p> tag is set to have a gray and dotted border. Links are set to have a groove border with transparent color.