BORDER STYLES 3
MAKING EACH SIDE DIFFERENT
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.
- border-style:dotted solid double dashed;
top border is dotted
right border is solid
bottom border is double
left border is dashed - border-style:dotted solid double;
top border is dotted
right and left borders are solid
bottom border is double - border-style:dotted solid;
top and bottom borders are dotted
right and left borders are solid - 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 14th of October 2024 02:05:59 AM
by 
~~~ 
Tandem Tooters
Arbor Hosting
