Specify a Simple Border - Expanded

We discussed in another tutorial about general facts regarding borders and what is the simplest way to create a border. Of course, there is more to it than that - a simple border can be more than just a line that surrounds the element. Check for the attached source code for a sample code of what a simple border would look like.

Take a look at the code - the border property has values for each of the three values we have talked about - color, style and width:

Style="border: 10px ridge gray" - for an inline CSS style

and

p {border: 10px ridge gray;} - for general CSS style

The default style for borders is none - this tells us that if you want to have a border, you might as well specify a style - no style specified, no border. By simply specifying several border-properties such as border-color or even border-width will not get you a border, so do not assume this by any chance. In order to get a border you need to specify the border-style property.

Choosing from a variety of border styles

There are known to be eight different border styles as it follows:

• The solid border style - a thick line will surround your element.
• The dotted border style - a series of dots will serve as a border for your element.
• The dashed border style - the border is made out of a series of dashes.
• The double border style - obviously, a double line will be the border in this case.
• The groove and the ridge border styles - more graphical border styles.
• The inset and outset border styles.

The picture above shows each style listed on the right, even though some of them might look a bit thicker than you would want them to look. They are that thick because I set them that way so that you can see them clearly. Generally speaking, few of those frames should be that thick. Most of them, like dotted, dashed, solid, double and so on should normally be kept under 4 pixels. Remember that the browser has a very important role in the display of your webpage. It is a known fact that sometimes, when using Firefox and the "dotted" property for a border, you will see a series of small dashes instead of proper dots.

CSS3 tip:

With CSS3 there is a new property developed called border-radius. Border-radius will allow you to refine the appearance of your borders even further by simply rounding it at its corners. You can use this specific property to, for example put ornaments on your frames.