Even before CSS 3 introduced a cornucopia of new border properties, CSS 2.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 CSS 3, 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 CSS 3 properties.

In this article, we’ll explore the CSS 3 and CSS 2.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

supports any valid color value including 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

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 CSS 3, 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

specifies an image to use instead of the border styles given by the properties and as an additional background layer for the element. If the value is 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

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 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

and 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

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

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 CSS 3, 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 CSS 3?

3? 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

determines tiling for the length of all four sides border-fit-width determines tiling for the width of all four sides

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

include: , , , , 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 CSS 3 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

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 CSS 2.1 specifications for the border module, but now with CSS 3, 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.