Understanding CSS3 and CSS2.1 Border Properties

Even before CSS3 introduced a cornucopia of new border properties, CSS2.1 provided plenty of great functionality, enabling designers to style and enhance borders in many different ways. But now with the many new border properties available with CSS3, much more is possible, including everything from background border images, asymmetrical border radii, border transformations, custom fitting, and much more.

While not every browser fully supports all of the awesome new styles, we can practice progressive enhancement to create beautiful, well-styled borders for modern browsers while supporting the dinosaurs with suitable fallback styles.

Many of us know how easy it is to use CSS border properties to do cool stuff like image-free, cross-browser rounded corners, but there is so much more that is possible with all of the new CSS3 properties.

In this article, we’ll explore the CSS3 and CSS2.1 border properties while keeping a keen eye out for obvious patterns and taking note of key points along the way. When it’s all said and done, hopefully we’ll have a better understanding of the “big picture” concerning the functional and syntactical mechanism behind the magical world of CSS border properties.

Border Color

The border-color property consists of four individual properties:

border-color
	border-top-color
	border-right-color
	border-bottom-color
	border-left-color

• border-color supports any valid color value including transparent
• the element’s background color extends into the border area and appears when border-color set to transparent

Border Style

The border-style property consists of four individual properties:

border-style
	border-top-style
	border-right-style
	border-bottom-style
	border-left-style 

• property values include: none, hidden, dotted, dashed, solid, double, dot-dash, dot-dot-dash, wave, groove, ridge, inset, outset

Border Radius

The border-radius property consists of four individual properties:

border-radius
	border-top-right-radius
	border-bottom-right-radius
	border-bottom-left-radius
	border-top-left-radius

• negative values not allowed
• two values may be used to define both horizontal and vertical radii
• if either of these two values is set to zero, no rounding will be rendered
• if these values are the same, they may be combined into a single value

Border Image

The border-image property consists of two different groups, border-edge-image and border-corner-image.

border-edge-image

In CSS3, the border-image property consists of the following individual properties:

border-image
	border-image-source
	border-image-slice
	border-image-width
	border-image-outset
	border-image-repeat

Which may be further broken down to accommodate unique individual side images:

border-image
	border-top-image
	border-right-image
	border-bottom-image
	border-left-image

• border-image-source specifies an image to use instead of the border styles given by the border-style properties and as an additional background layer for the element. If the value is none or if the image cannot be displayed, the border styles will be used
• there are four border-image-slice values that represent inward offsets from the top, right, bottom, and left edges of the image respectively, dividing it into nine regions: four corners, four edges and a middle. The middle image part is discarded (treated as fully transparent) unless the fill keyword is present, in which case it is drawn over the background
• someone please explain to me what the difference is between border-image-width and border-image-slice
• the border-image-outset specifies the amount by which the border image area extends beyond the border box on the top, right, bottom, and left sides respectively
• the border-image-repeat property specifies how the images for the sides and the middle part of the border image are scaled and tiled; values include: stretch, repeat, round
• specifies the images for the edges, not the corners
• question: in CSS3, can we still specify up to three images for each of the four edges, like so:

.border-image {
	border: solid transparent 10px;

	border-top-image: url("border-top-01.png") 10 round round,
			  url("border-top-02.png") 10 round round,
			  url("border-top-03.png") 10 round round;

	border-right-image: url("border-right-01.png") 10 round round,
			    url("border-right-02.png") 10 round round,
			    url("border-right-03.png") 10 round round;

	border-bottom-image: url("border-bottom-01.png") 10 round round,
			     url("border-bottom-02.png") 10 round round,
			     url("border-bottom-03.png") 10 round round;

	border-left-image: url("border-left-01.png") 10 round round,
			   url("border-left-02.png") 10 round round,
			   url("border-left-03.png") 10 round round;
	}

border-corner-image

The border-corner-image property consists of four individual properties:

border-corner-image
	border-top-left-image
	border-top-right-image
	border-bottom-right-image
	border-bottom-left-image

• question: is this property still possible with CSS3?
• specifies images for the corners, not the edges
• separate images may be specified for each of the four border corners:

.border-image {
	border: solid transparent 10px;

	border-top-left-image:     url("top-left.png") 10 round round,
	border-top-right-image:    url("top-right.png") 10 round round,
	border-bottom-right-image: url("bot-right.png") 10 round round,
	border-bottom-left-image:  url("bot-left.png") 10 round round,
	}

As if that weren’t enough, each of these properties may be applied via vendor-specific prefixes, which are summarized as follows:

.border-image {
	border: solid transparent 10px;

	-webkit-border-image: url("border.png") 10 round round;
	-khtml-border-image:  url("border.png") 10 round round;
	-icab-border-image:   url("border.png") 10 round round;
	-moz-border-image:    url("border.png") 10 round round;
	-o-border-image:      url("border.png") 10 round round;
	border-image:         url("border.png") 10 round round;
	}

Border Fit

The border-fit property consists of two different groups, border-fit-length and border-fit-width.

border-fit
	border-fit-length
	border-fit-width

Border-fit-length

The border-fit-length property consists of four individual properties:

border-fit-length
	border-top-fit-length
	border-right-fit-length
	border-bottom-fit-length
	border-left-fit-length

Border-fit-width

The border-fit-width property consists of four individual properties:

border-fit-width
	border-top-fit-width
	border-right-fit-width
	border-bottom-fit-width
	border-left-fit-width

• property values include: clip, repeat, scale, stretch, overwrite, overflow, space
• border-fit-length determines tiling for the length of all four sides
• border-fit-width determines tiling for the width of all four sides
• there is also a border-corner-fit property, which determines tiling for corners

Border Image Transformation

The border-image-transform and border-corner-image-transform properties are used to specify that an image on the corner is a transform of the border-top-left-image or the images on the edge is a transform of border-top-image and border-left-image.

border-image-transform
border-corner-image-transform

• property values for border-image-transform include: none, rotate, reflect-xy, reflect-right, reflect-left
• property values for border-corner-image-transform include: none, rotate, reflect

Border Break

Nope, this doesn’t mean we get to take a break from all this border insanity. Rather, the border-break property determines how the border handles breaks in content flow.

border-break

• When a box that has a border is broken at a page break, column break, or, for inline elements, at a line break, a border can be inserted at the break, or the border can be left open
• A border-style or a border-image will add padding and a border at the break, as if it was the normal end of the box
• The value “none” will not add padding or border at the break. The property has no effect if the border is absent

Box Shadow

Not sure why this is included in the CSS3 Border Module, so here it is. The box-shadow property adds a drop shadow to any block-level element:

box-shadow

• one or more drop-shadows can be attached to a box
• drop-shadows are drawn just outside the border
• shadows do not influence the layout: they may overlap with other boxes
• shadows may be rounded if border-radius is applied to the box
• shadows are only drawn where borders would also be drawn

Border Shorthand Properties

The border property is a shorthand property for setting the same width, color, style and images for all four borders of a box.

border
	border-top
	border-right
	border-bottom
	border-left

Each of these shorthand properties consists of the following individual properties:

border
	border-width
	border-style
	border-color
	border-url
	border-image-transform

	border-top
		border-top-width
		border-top-style
		border-top-color
		border-top-url
	border-right
		border-right-width
		border-right-style
		border-right-color
		border-right-url
	border-bottom
		border-bottom-width
		border-bottom-style
		border-bottom-color
		border-bottom-url
	border-left
		border-left-width
		border-left-style
		border-left-color
		border-left-url

• omitted values are set to their initial values
• the border-image property overrides the border-style property

There’s …too many of them

Well, perhaps not, but I do think that 90% of current designs are probably not taking advantage of all that these border properties have to offer. I think I understood the CSS2.1 specifications for the border module, but now with CSS3, much has changed, including properties that seem to have disappeared entirely (e.g., border-corner-image). Other properties are less-capable (e.g., multiple images via border-image), and others seem like they may possibly interfere with each other (e.g., border-image-repeat and border-fit).

Hopefully all of this will be worked out and become clear so regular joes like myself can understand and apply these rules properly and without confusion or paranoia that they might break something, somewhere, in a browser far far away. In the meantime, it looks like we have more than enough border styles to keep us going with well-styled borders for the next 5 to 10 years.

About the Author

Jeff Starr = Fullstack Developer. Book Author. Teacher. Human Being.