The CSS border properties allow you to specify the style, width, and color of an element's border.

The CSS border properties are use to specify the style, color and size of the border of an element. The CSS border properties are given below

border-style
border-color
border-width
border-radius

CSS border-style

The Border style property is used to specify the border type which you want to display on the web page.

There are some border style values which are used with border-style property to define a border.

Value	Description
none	It doesn't define any border.
dotted	It is used to define a dotted border.
dashed	It is used to define a dashed border.
solid	It is used to define a solid border.
double	It defines two borders wIth the same border-width value.
groove	It defines a 3d grooved border. effect is generated according to border-color value.
ridge	It defines a 3d ridged border. effect is generated according to border-color value.
inset	It defines a 3d inset border. effect is generated according to border-color value.
outset	It defines a 3d outset border. effect is generated according to border-color value.

See this example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS Border</title>
<style>  
	p.none {border-style:none}  
	p.dotted {border-style:dotted}  
	p.dashed {border-style:dashed}  
	p.solid {border-style:solid}  
	p.double {border-style:double}  
	p.groove {border-style:groove}  
	p.ridge {border-style:ridge}  
	p.inset {border-style:inset}  
	p.outset {border-style:outset}  
	p.hidden {border-style:hidden}  
</style>  
</head>
<body>  
	<p class="none">No border.</p>  
	<p class="dotted">A dotted border.</p>  
	<p class="dashed">A dashed border.</p>  
	<p class="solid">A solid border.</p>  
	<p class="double">A double border.</p>  
	<p class="groove">A groove border.</p>  
	<p class="ridge">A ridge border.</p>  
	<p class="inset">An inset border.</p>  
	<p class="outset">An outset border.</p>  
	<p class="hidden">A hidden border.</p>  
 </body>
</html>

The border-width property is used to set the border's width. It is set in pixels. You can also use the one of the three pre-defined values, thin, medium or thick to set the width of the border.

See this example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS Border Width</title>
<style>  
p.one{border-style:solid;border-width:5px}   
p.two{border-style:solid;border-width:medium}   
p.three{border-style:solid;border-width:1px}   
</style>  
</head>
<body>  
	<p class="one">This is first paragraph.</p>  
	<p class="two">This is second paragraph.</p>  
	<p class="three">This is third paragraph.</p> 
 </body>
</html>

There are three methods to set the color of the border.

Name: It specifies the color name. For example: "green".
RGB: It specifies the RGB value of the color. For example: "rgb(255,0,0)".
Hex: It specifies the hex value of the color. For example: "#ff0000".

There is also a border color named "transparent". If the border color is not set it is inherited from the color property of the element.

See this example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS Border Color</title>
<style>  
p.one{border-style:solid;border-color:green}   
p.two{border-style:solid;border-color:#888888}   
p.three{border-style:solid;border-width:1px}   
</style>  
</head>
<body>  
	<p class="one">This is first paragraph.</p>  
	<p class="two">This is second paragraph.</p>
 </body>
</html>