alogo

CSS Border Styles

It is hard to remember the CSS border styles so with some help from W3schools, creating a demo of the available border styles is easy as pie. But in the process, Border style turns out to be handy for providing alternative link decorations as shown below:
[iframe src=’http://theopensourcery.ca/Scripts/cssborderstyles.html’ width=’620′ height=’380′]

Now the tricks here are easy to describe when you see the code:


First, developers have to turn off the default A-link text decorations with text-decoration:none in the three cssa1 thru cssa3 classes. Then by using various CSS BORDER clauses one can add distinctive styles to your links. And because these are classes they can be easily used in subsequent links. One caution,depending on the pixel size of the border developers may have to add a {line-height:120%} clause to allow for the greater interline spacing required.

Summary

Border stylings provide for a wide range of text decoration styles. Preferably they can be added to grids or tabular reports. But here they have been used to effectively style A-links.

Pin It on Pinterest