Styling Options for CSS Border

This article highlights the different options you can choose from in styling your borders using CSS. This includes styling border width, style, color and specific sides.

If you think incorporating borders is laborious, then you are missing the fun. Yes it requires detailed styling but once you get the picture, it’s worth the effort. In an HTML document, it’s impossible to create a border around an element but with CSS you can customize specific style and create a punch on your web page. There are different border designs you can use. Let us identify these designs and learn how to use them.

Border-Width

This property is used to change the thickness of your borderline may it be on top, bottom or both sides. There are specific values of each thickness. Entries can either be on numbers (1px-10px) or word description (thin, medium, thick) See below for illustration:

p.one{border-width:10px;}

or

p.one{border-width:thick;}

Border-Style Designs

Putting up a style in your border highlights the element contained in it. Though CSS Border-style varies on its type, it all has the same format. The following are:

p.dotted {border-style:dotted;}

p.solid {border-style:solid;}

p.ridge {border-style:ridge;}

 

Border Color

In order for the borders not to appear lame and pale, CSS border property can incorporate color. Border-color can only be specified by hexadecimal, RGB or the key names per se.See the illustration below:

p.one {border-color:red;}

p.two {border-color:#98bf21;}

 

Specific Border Sides

One of the features of CSS border is that you can specify the border lines on each 4 sides. See illustration below.

p {border-top-style:ridge;

border-right-style:solid;

border-bottom-style:dotted;

border-left-style:groove;}

Three Properties-in-One

You may want to take a short cut if you find digging up each property laborious. Sometimes it is less of a headache to compile different properties into one. This can save time and increase productivity. Generally, borders split the contents from the other so that there is no mix up. The use of borders makes the whole page very eye-catching. The borders are easy to understand and they have to be demonstrated creatively.