Borders, Borders, and more Borders

Like most things with CSS, you can have more control over borders than you would with using HTML. In HTML, you could only make a border and it would surround the entire element that you were working with. You could not define the type of border you wanted, HTML had one border and one border only. The only thing you could do was change the width of the border. If you used bordercolor, you could change the color of the border. With CSS, we can define what side of the element a border is located, what style to use, the width, and color of the border.

Border

Like most CSS attributes, there is one attribute that you can use to set the values of multiple attributes. The border attribute is the attribute that allows for this shorthand.

Border-Color

As the attribute's name suggests, the border-color sets the color of the element's border. You can use RGB, hexadecimal, or any of the HTML color names to set the value for the border color.

Border-Style

The border-style attribute will define the style of the border. There are nine different styles that you can choose from. Those styles are hidden, dotted, dashed, solid, double, groove, ridge, inset, and outset. Hidden is the default value, and does not show a border at all. Here are some examples of the borders.

Dotted border Dashed border Solid border

Double border Groove border Ridge border

Inset border Outset border

Border-Width

The border width, does what the name implies. It sets the width of the border. You can use any CSS measurement to set the border width. There are also some built in values that can be used to set the border width. Those valuse are thin, medium, and thick.

Additional Border Attributes

Each of the above attributes, can also be applied to one side of the border. You can do this by adding the side that you want the attribute to effect. For example if you only wanted the top border to have a color you would use border-top-color.

When using the border attributes, you can create a very professional looking drop shadow on an element. By only assigning values to both the bottom and right parts of the border. Below, we have used the shorthand border attribute, in combination width the side of the element that we wanted the border to create the drop shadow effect. We have set the borders to two pixels, width, set the color to gray, and made the border style solid.