CSS3 Borders for different HTML Elements (Part I)

Borders are also a way to make some elements look beautiful on your sites.
And some elements needs some border to separate from others.
Just have a look on a simple paragraph having some border around it:

This is a paragraph with some border around it. We can design and decorate the border as we want.

Adding border to some element:

If you decided to add a border around some element, simply select the element in CSS style section and add the border properties for it. Look at the code snippet below:
.someclass p { border: 1px solid; }
This will add a solid border of 1px around the selected element.

Border Style

Border style property defines the style of any HTML elements's border, like dotted, dashed etc. 

border-style values: 

Border style values can be:

none: defines no border

dotted: defines a dotted line around element.

dashed: defines a dashed line around element.

solid: defines a solid line around element.

double: defines a double border around the element.

groove: defines a 3D grooved border. The effect depends on the border-color value

ridge: defines a 3D ridged border. The effect depends on the border-color value

inset: defines a 3D inset border. The effect depends on the border-color value

outset: defines a 3D outset border. The effect depends on the border-color value

Border width:

We can use the border of our desired thickness as well. We just need to set the border-width property to do so.
Border width can be set in pixels or in three pre-defined value, thin, medium and thick.

Note: The border-width property can not work alone. We have to define the border using border-style property first.

Have a look here:
.someclass p { border: 1px; border-style: solid; border-width: 5px; }p.two { border-style: solid; border-width: medium; }

Border Color:

To look borders more nice, we can change the color of the border too. 
To do so, we just need to define border-color property.
Border color can be set by:

  • name - by specifying a color name like "red"
  • RGB - Specify an RGB value like "rgb(255,255,255)"
  • Hex - Specify a Hex value like "#ffffff"
If the border color property is not specified, then it is inherited from the element. 
p.one { border-style: solid; border-color: red; }
p.two { border-style: solid; border-color: #ff0011; }

Learn more in the next part:


Muhammad Arslan Aslam

I am a Full Time Student and occasional blogger. Software Engineering student with wide experience and interest in Front-End Web Development. You can find me on my profiles listed below and can get in touch any time.

Get Free Email Updates to your Inbox!

Post a Comment

Suggestions will be greeted.


Copyright © CSS3 (Web Designing) | Designed By Code Nirvana