CSS3 Borders for different HTML Elements (Part II)

Move to previous part:

Part I

---

Border Radius

The simple borders have four sharp corners, when it is set to default styling. 

If we want to change the border's corners from sharp to rounded, we have to define the border-radius property.
Its value can be set in pixels.
Have a look below:

p.one { border: 1px solid green; border-radius: 6px; }

It gives a nice looking effect on the elements. You can design a lot of boxes and buttons, using this technique.

Border Individual Sides

As we know, each border around an element, have four sides, left. right, top and bottom. 

CSS allows us to design each side individually. 

Look at the example below: 

p.one {
     border-top-style: dotted;
     border-right-style: double;
     border-bottom-style: dashed;
     border-left-style: solid;
     }

Output:  http://goo.gl/Se0wHi

We can also specify different color for each side individually.

Look at the example below: 

p.one {
     border: 5px solid;
     border-top-color: yellow;
     border-right-color: rgb(255,243,225);
     border-bottom-color: #ff0011;
     border-left-color: red;
     }

Output: http://goo.gl/1uWDtj

We can also change the width of each side individually.

p.one {
     border-style: solid;
     border-left-width: 15px;
     }

Output: http://goo.gl/Jy04p0

---

Border Style property can have one to four values.

• border-style: dotted solid double dashed;
• top border is dotted
• right border is solid
• bottom border is doubled
• left border is dashed
• border-style: dotted solid dashed;
• top border is dotted
• right border is solid
• bottom border is dashed
• border-style: double dotted;
• top border is doubled
• right border is dotted
• border-style: dashed;
• all sides are dashed

Border Short Hand Property

As we all know we have to deal with a lot of properties when dealing with borders. 

To shorten the code there is a short hand property for borders.

Short Hand property of borders deals with the following three border properties:

• border-width
• border-style
• border-color

p.one {
     border: 2px solid red;
     }

Have a look on the table containing All CSS Border Properties. 

• email
• facebook
• linkedin
• twitter
• reddit
• google+

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!

• Rss
• Twitter
• FaceBook
• Google +