codescracker


css

CSS Border Style



« Previous Tutorial Next Tutorial »


The border-style

The border-style property indicates the format of the border, such as solid, dashed, or double.

The syntax to set the border-style property in CSS is as follows:

border-style: value;

The following table describes values that can be used with the border-style property in CSS:

Value Description
none Shows no border as the computed border width is zero
hidden Specifies the hidden border
dotted Specifies a border with dots
dashed Specifies a border with short line segments (dashes)
solid Specifies a border with single line segment
double Specifies a border with two solid lines
groove Specifies a border that seems as it is carved into a canvas
ridge Specifies a border that seems as it is coming out from a canvas
inset Specifies a border that makes the box as it is embedded in a canvas
outset Specifies a border that makes the box as it is coming out from a canvas

The border-style property can be used with four directions : top, bottom, left, right, which are describes in the table given below:

Property Description
border-top-style Sets the style of the top border of an element
border-right-style Sets the style of the right border of an element
border-bottom-style Sets the style of the bottom border of an element
border-left-style Sets the style of the left border of an element
border-style shorthand Sets the same width, style, and color on all borders of an element

CSS Individual Border Side Styling

In CSS it is possible to specify different borders for different sides. Let's look at the following example shows how to apply style to individual side of border:

<html>
<head>
	<title>CSS Border Style Example</title>
	<style>
		.p1{ border-top-style: dashed; border-right-style: solid;
			border-bottom-style: groove; border-left-style: dotted; }
		.p1{ padding:10px; border-size:15px; border-color:red; }
	</style>
</head>
<body>

<p class="p1">All the four border of this paragraph is set individually.</p>

</body>
</html>

Here is the sample output produced by the above CSS individual border side styling example code:

css individual border side style

CSS border-style Shorthand

CSS border-style property may have from one to four values. Let's take a look at all the cases one by one.

(i) If border-style contains four values like this:

border-style: dotted solid double dashed;

Then, these four values represents:

(ii) If border-style contains three values like this:

border-style: dotted solid double;

Then, these three values represents:

(iii) If border-style contains two values like this:

border-style: dotted solid;

Then, these two values represents:

(iv) And, if border-style contains only one value like this:

border-style: dotted;

Then, the above value represents:


« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test