by Florence W Deems

1. This has 4 different borders. The code order specified
for this effect is in the first example below.

2. The top is dotted, the two sides are solid. The bottom is double.
See the code order for this effect in the second example below.

3. Top and bottom dotted. The two sides are solid. Look to the
third example below for the code order to get this effect.

4. All four borders are the same, dotted.
Example four below gives the single code word.

  1. border-style:dotted solid double dashed;
    top border is dotted
    right border is solid
    bottom border is double
    left border is dashed

  2. border-style:dotted solid double;
    top border is dotted
    right and left borders are solid
    bottom border is double

  3. border-style:dotted solid;
    top and bottom borders are dotted
    right and left borders are solid

  4. border-style:dotted;
    all four borders are dotted

The border-style property is used in the example above. However, it also works with border-width and border-color.

The div in the head tag produces what looks like a table with rounded corners and a double border. But I had to use a table tag (with border="0") to get this centered on the screen. Please see the Border Radius tutorial link (below) for more info about this effect.

Remember to include a DOCTYPE tag, such as <!DOCTYPE html>
to start the page, or IE 8 might show peculiar results.

Border Styles Introduction ~ 2 ~ 3
Border Widths
Border Color Introduction ~ 2
Border Radius: Introduction ~ 2
Border Collapse Spacing ~ Pinning an Element
An older Border Playground from 2008

Visit these other Tutorials by Flo

Monday 26th of June 2017 09:42:25 AM



Tandem Tooters

Arbor Hosting