Spring Sale! Save 30% on all books w/ code: PLANET24
Web Dev + WordPress + Security

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 = Designer. Developer. Producer. Writer. Editor. Etc.
WP Themes In Depth: Build and sell awesome WordPress themes.

14 responses to “Understanding CSS3 and CSS2.1 Border Properties”

  1. Wow, That is huge list of properties. I never new that border can have those much properties. This inspires me to get in to my lab n start playing with borders ..
    thanks for effort !!

  2. Look forward to programme my newcoming blog in CSS3.0

  3. Calgary Web Design 2010/02/25 1:22 pm

    Thank you for this! Degradable CSS is great. Thanks again for the wonderful pointers.

  4. Diseuo web 2010/02/25 6:36 pm

    Thanks for the information, i’m learning css this information help me a lot.

  5. Diseuo web 2010/02/25 6:38 pm

    Thanks again

  6. Tyler Abell 2010/02/27 3:17 am

    Thanks for the insight on CSS, this has helped my understanding. The border property is more capable than I had perviously thought….

  7. Glad to hear this is useful for you guys. I know it wasn’t as “fleshed out” as it could’ve been, but time was a little short this week. Definitely a lot more to say about all of these different border properties though — maybe I’ll cover a few of them in more depth once things settle down a bit..

  8. Long Island Web Design 2010/03/05 3:46 am

    Nice work ….thanks for sharing
    But still I have a query……how to change mouse pointer with CSS?
    Waiting for reply..

  9. hi long Island web design

    u can use

    .help {cursor:help}
    .wait {cursor:wait}

    refer here http://www.w3schools.com/CSS/pr_class_cursor.asp

  10. Estelle Weyl 2010/03/07 12:59 am

    To answer a few questions you raise:

    At this time, it appears that only one background image can be implemented at a time. The browsers only support 1, and the spec only indicates the inclusion of one url for border-image-source.

    Different browsers are rendering border-image differently. Opera fits the image into the border, effectively shriking and stretching by default. Webkit does not, by default, stretch the image: maintaing the original proportions. Declaring all the values seems to be required to make the different browsers display similarly. The specification are vague and seemingly erroneous in some areas (With default border-image, is browser supposed to resize image to fit, like in Opera, or maintain original size like if Safari?) Stretch renders similarly, but round and repeat default differently. Opera chokes on / separating slice from width, and Firefox chokes on fill. We’ve got a ways to go!

    None seem to support the individual properties yet: just the shorthand. And none seem to understand the inclusion of all of the properties.

    I have some of the quirks listed at http://www.standardista.com/css3/css3-border-properties, and am still playing with it.

    Thanks for your post. I landed on it as I was seeking to answer some of the same questions that you have asked.

  11. Hi Estelle, thank you for taking the time to share this information. Your article on border properties and browser support (404 link removed 2013/02/08) is an invaluable reference that will be very helpful as we continue along the path toward full CSS3 compliance. Definitely a long way to go yet, but getting closer every day thanks to the diligent work from designers such as yourself. Keep up the good work and thanks again for sharing your knowledge.

  12. So, in Safari if I wanted to have a top border on a textarea and the image is the same width as the text area, what would be the syntax for that?

    textarea {
    -webkit-border-top-image: url("border.png");
    }

    Do we use the quotation marks or not? Do we need the value after specifying the image? I may have missed it in your article but I don’t understand what the value means. Also, I don’t quite understand what “round” signifies vs stretch. I understand the “stretch” but not the “round”.

    Thank you for your article.
    Linda

Comments are closed for this post. Something to add? Let me know.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
GA Pro: Add Google Analytics to WordPress like a pro.
Thoughts
I live right next door to the absolute loudest car in town. And the owner loves to drive it.
8G Firewall now out of beta testing, ready for use on production sites.
It's all about that ad revenue baby.
Note to self: encrypting 500 GB of data on my iMac takes around 8 hours.
Getting back into things after a bit of a break. Currently 7° F outside. Chillz.
2024 is going to make 2020 look like a vacation. Prepare accordingly.
First snow of the year :)
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.