CSS border properties
With CSS border properties, you can specify how borders appear around elements.
This tutorial 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: dashed, 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>
<h2>This text has a double border</h2>
<p>This text has a dotted border</p>
<a href="http://www.yahoo.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 borderSetting the width of a border
The width of a border is set with the border-width property. The values you can assign to this property include "thin", "medium", "thick", or a custom value in pixels.
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>
<h2>This text has a double border</h2>
<p>This text has a dotted border</p>
<a href="http://www.yahoo.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 pixelsSetting the color of a border
The color of a border is set with the border-color property. The values you can assign to this property include a color name, an RGB value, or a hexadecimal value.
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: #2f7e87;}
</style>
</head>
<body>
<h1>This text has a green dashed border</h1>
<h2>This text has a darkolivegreen double border</h2>
<p>This text has a gray dotted border</p>
<a href="http://www.yahoo.com">This text has a teal 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 teal groove border