New Published Post: How To Fix Adsense Not Showing After Redirecting Blogger To Custom Domain
Like Us:

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.

different border styles

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

  • 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)
    And lastly apply padding [this explains the distance of your  elements  from the borders and this being affected by the background color)
              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:
tilt  hover effect
Hello folks! This is Viral Apps, 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

No comments :

Post A Comment!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

Cerwenlloyd Gefjun

Related Posts Plugin for WordPress, Blogger...