Visually, boxes are defined by their edges. In CSS, these edges are associated with the border property.

Borders on web page elements are commonly assumed to be either invisible or a straight line of solid color. CSS provides far more flexibility and variety in border styles through properties such as border-radius and border-image.

Goals: Customize the appearance of an element with various border styles.

Prerequisite: The CSS Box Model

Time: 1 hour

Core Material

1. Basic Borders
2. Border Radius
3. Border Image

Optional

1. Turn Images Into Postage Stamps
2. Image Matting Effects

When You’re Done

Making borders, boxes and most everything else isn’t terribly effective unless you can place boxes where you want to on web pages, which is why we’ll be looking at basic layout next.

Photograph by Laura Williams, used with permission

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.