Styling Borders with CSS Border-Style Property

To go beyond the simple, default web pages, we need to learn how to add style to our content. To do that, we need to create a Cascading Style Sheet and add some properties to our content. One common property is the Border-Style. The Border-Style property consists of nine border styles that allow us to change the visual style of any box. This property is simple to use. Getting to know it will help you to create more designed web pages. Let’s take a look at all the different ways we can style our boxes’ borders:

We stand behind Server Intellect and their support team. They offer dedicated servers, and they are now offering cloud hosting!

• NONE:
  border-style: none;
  Is the default property. No border is displayed.


• DOTTED:
  border-style: dotted;
  A sequence of dots is displayed:
  


• DASHED:
  border-style: dashed;
  A sequence of short lines form the border:
  


• SOLID:
  border-style: solid;
  A single line segment round the border. The “original” border:
  


• DOUBLE:
  border-style: double;
  Two solid line segments form the border:
  


• GROOVE:
  border-style: groove;
  Looks like an indentation:
  


• RIDGE:
  border-style: ridge;
  A raised border effect:
  


• INSET:
  border-style: inset;
  An insertion drops into the box:
  


• OUTSET:
  border-style: outset;
  An inception of the border rises from the box:
  

IMPORTANT FACTS:

• To specify the visual style of a border use the border-style property.
• The default style is: None. To display a border the property needs to be set.
• Borders are added on top of the box’s background; so, make sure to add padding.
• The following styles require a border-color property: Groove, Ridge, Inset, and Outset.
• The border-style property can be set to style the entire border, or just the top, right, bottom or left side of the box. Consequently, it can have from one to four values.
• This property is NOT inherited.
• This property is supported in the majority of browsers. Firefox (1), Internet Explorer (4, 5, and 6) – earlier versions require inline elements to be absolute positioned, Mozilla (1), Netscape (6 and 7), and Opera (3, 4, 5, 6, 7, and 8).
• Shorthand version of the “border-style” property is “border”.

Now you can go beyond the simple, default Web pages. Add a special touch to your design using the border-style property.

If you’re ever in the market for some great Windows web hosting, try Server Intellect. We have been very pleased with their services and most importantly, technical support.

Download Styling Borders with the CSS Border-Style Property File