Different Border Styles for Various Uses

I intentionally write this article to elaborate more those different border styles that add beauty to our CSS applications.

Below are lists of border styles:

none: Defines no border

dotted: Defines a dotted border

dashed: Defines a dashed border

solid: Defines a solid border

double: Defines two borders. The width of the two borders are the same as the border-width value

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

Explanation:

• Border width, style,color and padding
In setting the width of the borders, we will use pixels (px in short)

For the style, select among the nine styles (none, dotted, dashed, solid, double, groove, ridge, inset & outset)

For  adding colors, you can choose it from our color code generator.

And lastly apply padding [this explains the distance of your  elements  from the borders and this being affected by the background color)

Example:
              border: 7px outset #642880; padding: 15px;

But you can also specify what border width, style and color  to be applied in  each side. Please take a closer look at the example below.

The css that used in this example is "background-color: #adad25; border-bottom: 15px ridge #B04F6F; border-left: 10px outset #2F2D7C; border-right: 3px inset #F8F835; border-top: 20px double #981510;padding: 20px;"

Now if you want to present something (text, image or video)

in your post that is being enclosed in a border, you can use the code below.

<div style="background-color: none;border-top: 5px double #B04F6F;border-right: 5px double #B04F6F; border-bottom: 5px double #B04F6F; border-left: 5px double #B04F6F; padding: 3px;">Enter your data here </div>

Change the border style, background color, width, color of each border and padding that would match on your data presented.

Have a nice Day Bro and Enjoy!
Credits goes to w3schools with little modification from me. 

About the Author:

Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More

Follow him @ Twitter |Facebook