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.




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

Friday 28th of April 2017 03:42:15 PM



by

~~~

Tandem Tooters

Arbor Hosting