Web Tutorials :: Go to previous category Cascading Style Sheets Go to next category :: Go to previous tutorial 38. What are the different ways that borders can be styled? Go to next tutorial
What are the different ways that borders can be styled?
Author: Deron Eriksson
Description: This CSS tutorial describes the different ways that borders can be styled using the border-style, border-top-style, border-right-style, border-bottom-style, and border-left-style properties.
Tutorial created using: Windows XP

With CSSW, borders can be styled using the border-style, border-top-style, border-right-style, border-bottom-style, and border-left-style properties. The border-style property applies to the top, right, bottom, and/or left (if one of more of them are specified), while the other four properties refer to the style for their respective borders (top, right, bottom, or left).

According to the CSS 2.1 specification, the possible styles for borders are:

  • none - no border (0 width)
  • hidden - like none, except for table border conflict resolution
  • dotted - border consists of dots
  • dashed - border consists of dashes
  • solid - border is a solid line
  • double - border is a double line
  • groove - border looks like it goes inward
  • ridge - border looks like it comes outward
  • inset - box looks like it goes inward
  • outset - box looks like it comes outward
  • inherit - inherit border from parent element

The style-test.html file demonstrates the different possible styles for borders. It shows setting the border-top-style, border-right-style, border-bottom-style, and border-left-style properties. As a final example, it shows setting different border styles for the top, right, bottom, and left, using the border-style property.

style-test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Style Test</title>
<style type="text/css">
div { margin: 5px; }
</style>
</head>
<body>
<div style="border-style: none">border-style: none</div>
<div style="border-style: hidden">border-style: hidden</div>
<div style="border-style: dotted">border-style: dotted</div>
<div style="border-style: dashed">border-style: dashed</div>
<div style="border-style: solid">border-style: solid</div>
<div style="border-style: double">border-style: double</div>
<div style="border-style: groove">border-style: groove</div>
<div style="border-style: ridge">border-style: ridge</div>
<div style="border-style: inset">border-style: inset</div>
<div style="border-style: outset">border-style: outset</div>
<div style="border-style: inherit">border-style: inherit</div>
<div style="border-top-style: solid">border-top-style: solid</div>
<div style="border-right-style: solid">border-right-style: solid</div>
<div style="border-bottom-style: solid">border-bottom-style: solid</div>
<div style="border-left-style: solid">border-left-style: solid</div>
<div style="border-style: dotted solid dashed double">border-style: dotted solid dashed double</div>
</body>
</html>

The style-test.html page in IE7 is shown here:

border style examples
 
Web Tutorials :: Go to previous category Cascading Style Sheets Go to next category :: Go to previous tutorial 38. What are the different ways that borders can be styled? Go to next tutorial