codescracker


css

CSS Border Width



« Previous Tutorial Next Tutorial »


The border-width

The border-width property specifies the width of the border area. The width is specified in pixels.

The syntax to set the border-width property is as follows:

border-width: value;

The border can have either of the following values:

Value Description
Thin Defines a thin border
Medium Defines a medium border
Thick Defines a thick border
Length Defines the thickness of the border
Inherit Defines that the width is inherited from the parent element

The width of different sides of the border is set with the help of following properties:

CSS border-top-width

The border-top-width property sets the width of the top border of an element. Negative values are not allowed in this property. The syntax to set border-top-width property is as follows:

border-top-width: value;

CSS border-right-width

The border-right-width property sets the width of the right border of an element. Negative values are not allowed in this property. The syntax to set border-right-width property is as follows:

border-right-width: value;

CSS border-bottom-width

The border-bottom-width property sets the width of the bottom border of an element. Negative values are not allowed in this property. The syntax to set border-bottom-width property is as follows:

border-bottom-width: value;

CSS border-left-width

The border-left-width property sets the width of the left border of an element. Negative values are not allowed in this property. The syntax to set border-left-width property is as follows :

border-left-width: value;

CSS border-width Shorthand

The border-width shorthand property specifies the shortcut form of border-top, border-right, border-bottom, and border-left properties.

The border-width property values range from one to four. Here is the explanation of each case, one by one:

CSS Border Width Example

Let's look at the following example to understand the CSS border-width Property:

<html>
<head>
	<title>CSS Border Width Example</title>
	<style>
		.p1{border-width:10px;border-style:solid;padding:5px;border-color:green;}
		.p2{border-width:1px;border-style:solid;padding:5px;border-color:green;}
		.p3{border-width:thin;border-style:solid;padding:5px;border-color:green;}
		.p4{border-width:medium;border-style:solid;padding:5px;border-color:green;}
		.p5{border-width:thick;border-style:solid;padding:5px;border-color:green;}
	</style>
</head>
<body>

<p class="p1">This is 10px solid green border</p>
<p class="p2">This is 1px solid green border</p>
<p class="p3">This is thin solid green border</p>
<p class="p4">This is medium solid green border</p>
<p class="p5">This is thick solid green border</p>

</body>
</html>

Here is the sample output produced by the above CSS border-width property example code:

css border width

Note - The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.


« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test