Categories
CSS Tutorials

Borders

introduction
Formatting Text
Box Model
Advanced selectors
More about CSS

CSS border properties are used to set the border color, style, width. We can set different types of borders to HTML elements like dotted borders, dashed borders, etc. If we want only one side border then we can put the top border or bottom border like that. 

Properties of border

1. Border style: This property is used to specify the type of border. None of any other border properties will work without setting the border style.

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.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

2. Border width: This property specifies the width of the border. How much thickness we want, we can specify with this property. This width can be in px, pt, cm, thin, medium or thick

Example:

<html> 
  <head>
    <style>
      p {
        border-style: solid;
        border-width: 8px;
      }
    </style></head> 
  <body>   
    <p>   Edupoly Training and Development   </p>   
  </body> 
</html>

Output:

3. Border color: This property is used to set the color of the border. Color can be set using the color name, hex value, or RGB value. If the color is not specified, the border inherits the color of the element itself.

<html><head>
  	<style>
  		p {
  			border-style: solid;
  			border-color: red
  		}
  	</style></head><body>	
    <p>Edupoly Training and Development</p>    
  </body>
</html>

Output:

4. Border individual property: We can style each side of the border with different styles. We can style each side with color, style and width properties. 

Syntax:

border-top-style : dotted;
border-bottom-width: thick;
border-right-color: green;

Example:

<html><head><style>
    	h2 {
        	border-top-style: dotted;
      	}
    </style></head><body><h2>Edupoly Training and Development</h2></body>
</html>

Output:

Note: In the above example, we have styled top border as dotted border.

More examples on borders

Example:

<html><head>
  	<style>
  		p {
  			border-style: solid dashed dotted double;
  			border-color: red;
  		}
  	</style></head><body>	
    <p>Edupoly</p>	
    <p>Border properties:color</p></body>
</html>

Output:


Note: In this example we have applied four different styles to each side of the border. That will apply in order to top, right, bottom and left.