codescracker


css

CSS Border Shorthand



« Previous Tutorial Next Tutorial »


The border shorthand property is used to specify all the border related properties into one property.

The border shorthand property can be divided into the following five parts:

CSS border-top

The border-top sets the width, style, and color of the top border of an element.

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

border-top: thick double #00ff11;

CSS border-right

The border-right sets the width, style, and color of the right border of an element.

The syntax to set border-right shorthand property is as follows :

border-right: thick double #00ff11;

CSS border-bottom

The border-bottom sets the width, style, and color of the bottom border of an element.

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

border-bottom: thick double #00ff11;

CSS border-left

The border-left sets the width, style, and color of the left border of an element.

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

border-left: thick double #00ff11;

CSS border Shorthand

The border sets the same width, style, and color on all borders of an element.

The syntax to set the border shorthand property is as follows :

border: thick double red;

CSS Border Shorthand Example

Here is an example to understand CSS border shorthand Property:

<html>
<head>
	<title>CSS Border Shorthand Example</title>
</head>
<body>

<p style="border:4px none green;padding:2px;">This is 4px none green border</p>
<p style="border:4px solid green;padding:2px;">This is 4px solid green border</p>
<p style="border:4px dotted green;padding:2px;">This is 4px dotted green border</p>
<p style="border:4px dashed green;padding:2px;">This is 4px dashed green border</p>
<p style="border:4px double green;padding:2px;">This is 4px double green border</p>
<p style="border:4px groove green;padding:2px;">This is 4px groove green border</p>
<p style="border:4px ridge green;padding:2px;">This is 4px ridge green border</p>
<p style="border:4px inset green;padding:2px;">This is 4px inset green border</p>
<p style="border:4px outset green;padding:2px;">This is 4px outset green border</p>
<p style="border:4px hidden green;padding:2px;">This is 4px hidden green border</p>

</body>
</html>

Here is the sample output produced by the above CSS border shorthand example code:

css border shorthand

« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test