Border Styles 1, Introduction, by Florence W Deems

BORDER STYLES 1
INTRODUCTION

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.

<!DOCTYPE html> <head> <style> div { border:6px double; width:700px; padding:10px; background:#ffffff; border-top-left-radius:2em; -webkit-border-top-left-radius:2em; /* Safari */ border-top-right-radius:2em; border-bottom-left-radius:2em; border-bottom-right-radius:2em; } p.dotted {border-style:dotted; border-width:10px; border-color:red;} p.dashed {border-style:dashed; border-width:10px; border-color:orange;} p.solid {border-style:solid; border-width:10px; border-color:saddlebrown;} p.double {border-style:double; border-width:10px; border-color:green;} p.groove {border-style:groove; border-width:10px; border-color:yellow;} p.ridge {border-style:ridge; border-width:10px; border-color:yellow;} p.inset {border-style:inset; border-width:10px; border-color:orange;} p.outset {border-style:outset; border-width:10px; border-color:orange;} </style> </head>  <p class="inset">This paragraph will have an inset border around it. You can also change the width and color.</p>

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 01:11:12 AM

by

~~~

Tandem Tooters

Arbor Hosting