CSS Border and Padding Rules

The border attribute is used with the container tag DIV (division) to assign values. Borders have three main properties: border-width, border-color and border-style; others width, height, and sides.
Border-width: Defines border thicknessany valid measurement
border-width:3px

border-color:blue; border-style:solid;border-width:3px;padding:5x

Border-color: Defines border color Any color value P {border-color:#ffffcc}
border-color:#ff0000; border-style:double;border-width:4px;padding:5x
Border-style: Defines border styles:solid, dashed, dotted, double, groove, ridge, inset, outset; padding:5px
{border-color:green; border-style:double;border-width:6px}
{border-bottom:dotted #000080 5px;padding:5px}
{border-color:purple; border-style:dashed;border-width:9px}
{border-color:#cccccc;border-style:outset;border-width:10px}
{border-color:#cccccc;border-style:inset;border-width:10px}
Padding: Separates the text from the border. Padding value is for four sides or specify side: (top, right, bottom, left).
h1 {padding-top:20px} or td {padding: 10px 20px 10px 20px

Specify Border Sides

Border-left:

Left Side

Border-right:

Right Side

Border-bottom:

Bottom of Text

Border-top:

Top of Text

Shorten version: {border: 3px solid #0000ff; padding:4px}

Project: Rounded Box Corners

Web Design with XHTML Part II
Doris Cuffey, Instructor