CSS Tutorial

CSS Style

CSS Layout Style

CSS Float Style

CSS Reference

CSS Border Style Properties


CSS Border properties give you control to set border style. eg. border-width, border-style and border-color.

You can also set border style individually like,

Border Border Properties
border-top border-top-color
border-top-style
border-top-width
border-bottom border-bottom-color
border-bottom-style
border-bottom-width
border-left border-left-color
border-left-style
border-left-width
border-right border-right-color
border-right-style
border-right-width

Example Code:

<body>
	<p style="border-style: solid;border-width: 1px;border-color: orange;">This Paragraph is example of the border 
	properties of CSS style can change a border color, border width or border style.</p>
</body>

Run it...   »

Example Result:

This Paragraph is example of the border properties of CSS style can change a border color, border width or border style.

CSS border shorthand property

CSS border property write in shorthand way including following border properties:

  1. border-width
  2. border-style
  3. border-color

border: border-width border-style border-color;


Same as above, you can set border shorthand individually,

  • border-left
  • border-right
  • border-top
  • border-bottom

Example Code:

<body>
	<p style="border-top:2px dashed orange;">top border style dashed.</p>
</body>

Run it...   »

Example Result:

top border style dashed.

CSS border-style property

Example Code:

<body>
	<p style="border:2px solid orange;"> border style is solid.</p>
	<p style="border:2px dotted orange;"> border style is dotted.</p>
	<p style="border:2px dashed orange;"> border style is dashed.</p>
	<p style="border:2px double orange;"> border style is double.</p>
	<p style="border:2px groove orange;"> border style is groove.</p>
	<p style="border:2px ridge orange;"> border style is ridge.</p>
	<p style="border:2px inset orange;"> border style is inset.</p>
	<p style="border:2px outset orange;"> border style is outset.</p>
	<p style="border:2px hidden orange;"> border style is hidden.</p>
</body>

Run it...   »

Example Result:

border style is solid.

border style is dotted.

border style is dashed.

border style is double.

border style is groove.

border style is ridge.

border style is inset.

border style is outset.

border style is hidden.