BORDER STYLES 1
by Florence W Deems
Are you tired of just plain old borders? This tutorial will show you how to dress them up.
The CSS3 (the latest version of CSS from w3schools.com) border has several properties, such as style, width, color - BUT the STYLE MUST be included first in the codes, or the other properties will NOT work! However, the style will work alone without the other properties.
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border.
A ridge border.
An inset border.
An outset border.
For no border, just use the regular paragraph tag <p>
Note, all borders above are 10px wide.
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.
Border Styles Introduction ~ 2 ~ 3
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
Thursday 20th of September 2018 06:06:46 PM