CSS Borders
We have learned already that we can control border positions and widths using CSS. This allows us to create all sorts of interesting effects, from virtual "picture frames" around our images to underlines beneath our text. Up until now we have just used solid borders, but in fact we have several different border styles at our disposal:
Solid border |
border: 3px solid red |
Dotted border |
border: 3px dashed red |
Dashed border |
border: 3px dashed red |
Double border |
border: 3px double red |
Groove border |
border: 6px groove red |
Ridge border |
border: 6px ridge red |
Inset border |
border: 6px inset red |
Outset border |
border: 6px outset red |
Here you can see demonstrations of several border styles, along with the code used to produce them. Note that some of these borders need to be thicker than one pixel in order to display properly, so it is worth playing around with them to get the effect you want.
Different borders on each side
In the example above we have used the same border properties on every side of our element. However, we can specify separate border properties for each side using the border-(side)-style, border-(side)-width and border-(side)-color CSS properties:
This is how the element appears. Notice that the borders on the left and bottom have different styles, widths and colors. |
border-left-style: dashed; border-left-width: 5px; border-left-color: orange; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: green; |
There is also a shorthand way to combine each of these properties into one line rather than three, by using the border-(side) property and specifying the width, style, and color in that order. For example:
Here we have set different border properties for each side of the element |
border-right: 1px solid black border-bottom: 3px solid gray border-left: 5px dashed orange border-top: 3px double black |
That just about covers borders. As you can see they are really very versatile and can be used to produce a wide range of interesting effects. The best way to learn is by experimenting with them; you'll find that with a bit of practice you can create almost any layout you want by combining the CSS padding, border and margin properties.