CSS is not an overly complex language. But even if you’ve been writing CSS for many years, you probably still come across new things — properties you’ve never used, values you’ve never considered, or specification details you never knew about.

In my research, I come across new little tidbits all the time, so I thought I’d share some of them in this post. Admittedly, not everything in this post will have a ton of immediate practical value, but maybe you can mentally file some of these away for later use.

1. The color Property Isn’t Just for Text

Let’s start with the easier stuff. The color property is used extensively by every CSS developer. Some of you not as experienced with CSS may not realize, however, that it doesn’t define only the color of the text.

Take a look at the demo below:

See the Pen CtwFG by SitePoint (@SitePoint) on CodePen.

Notice in the CSS, only one color property is used, on the body element, setting it to yellow. As you can see, everything on the page is yellow, including:

  • The alt text displayed on a missing image
  • The border on the list element
  • The bullet (or marker) on the unordered list
  • The number marker on the ordered list
  • The hr element

Interestingly, the hr element, by default does not inherit the value of the color property, but I had to force it to do so by using border-color: inherit. This is kind of odd behaviour to me.

All of this is verified by the spec:

This property describes the foreground color of an element’s text
content. In addition it is used to provide a potential indirect value
… for any other properties that accept color values.

I can’t think of anything else that would qualify as ‘foreground’, but if you do, let us know in the comments.

2. The visibility Property Can Be Set to “collapse”

You’ve probably used the visibility property hundreds of times. The most commonly used values are visible (the default for all elements) and hidden, which makes an element disappear while allowing it to still occupy space as if it was there (which is unlike display: none).

A third and rarely used value for the visibility property is collapse. This works the same way as hidden on all elements except table rows, table row groups, table columns, and table column groups. In the case of these table-based elements, a value of collapse is supposed to work similar to display: none, so that the space occupied by the collapsed row/column can be occupied by other content.

Unfortunately, the way browsers handle collapse is not consistent. Try the following demo:

See the Pen visibility: collapse by SitePoint (@SitePoint) on CodePen.

The CSS-Tricks Almanac advises never to use this, due to the browser inconsistencies.

From my observations:

  • In Chrome, it makes no difference if you apply collapse or hidden (See this bug report and comments)
  • In Firefox, Opera, and IE11, collapse seems to respond exactly as it should: The row is removed and the row below moves up.

Admittedly, this value is probably rarely ever going to be used, but it does exist, so if you didn’t know about it before, I guess in some odd way you are now smarter.

3. The background Shorthand Property Has New Values

in CSS2.1 the background shorthand property included 5 longhand values – background-color, background-image, background-repeat, background-attachment, and background-position. In CSS3 and beyond, it now includes three more, for a total of up to 8. Here’s how the values map:

background: [background-color] [background-image] [background-repeat]
            [background-attachment] [background-position] / [ background-size]
            [background-origin] [background-clip];

Notice the forward slash, similar to how font shorthand and border-radius can be written. The slash allows you to include a background-size value after the position in supporting browsers.

In addition, you also have up to two optional declarations for background-origin and background-clip.

So the syntax looks like this:

.example {
  background: aquamarine url(img.png)
              center center / 50%
              content-box content-box;

Test it in your browser using this demo:

See the Pen New background shorthand values by SitePoint (@SitePoint) on CodePen.

As for browser support, these new values seem to work fine in all modern browsers, but it’s likely you’ll have to provide good fallbacks for any nonsupporting browsers so it degrades gracefully.

4. The clip Property Works Only on Absolutely Positioned Elements

Speaking of background-clip, you’ve likely also seen clip before. It looks like this:

.example {
    clip: rect(110px, 160px, 170px, 60px);

This will ‘clip’ the element at the specified locations (explained here). The only caveat is that the element to which you apply clip must be positioned absolutely. So you have to do this:

.example {
    position: absolute;
    clip: rect(110px, 160px, 170px, 60px);

You can see how clip is disabled in the demo below when position: absolute is toggled:

See the Pen siFJu by SitePoint (@SitePoint) on CodePen.

You could also set the element to position: fixed, because, according to the spec, fixed-position elements also qualify as ‘absolutely positioned’ elements.

5. Vertical Percentages are Relative to Container Width, Not Height

This one is a tad bit confusing at first, which I’ve written about before. While you might know that percentage widths are calculated based on the width of the container, percentages on properties like top and bottom padding and top and bottom margins are likewise calculated based on the width of the container, rather than the height.

Here’s an example that you can adjust with a range slider, so you can see the effect:

See the Pen qLnpm by SitePoint (@SitePoint) on CodePen.

Notice that there are 3 “vertical” percentages declared on the inner box (top and bottom padding, and bottom margin). When the slider moves, it changes only the container width. But the other values change in response to this, as the output on the page shows, showing that these values, when declared as percentages, are based on container width.

6. The border Property is Kind of Like Inception

We’ve all done this at some point:

.example {
  border: solid 1px black;

The border property is a shorthand property that sets border-style, border-width, and border-color — all in a single declaration.

But don’t forget that each of the properties that the border property represents is itself a shorthand property. So border-width alone can be declared:

.example {
  border-width: 2px 5px 1px 0;

This will set different widths for each of the four borders. And the same is true for border-color and border-style, as shown in this awful demo:

See the Pen multiple border shorthands by SitePoint (@SitePoint) on CodePen.

In addition, each of those properties can be broken down even further with border-left-style, border-top-width, border-bottom-color, and so on.

But the catch is that you cannot use the regular border shorthand to set different values for different sides. So it’s shorthand inside of shorthand inside of shorthand, but not exactly.

7. The text-decoration Property is Now a Shorthand

I knew something on this list would blow your mind.

This is now standard, according to the spec:

a {
  text-decoration: overline aqua wavy;

This property now represents 3 properties: text-decoration-line, text-decoration-color, and text-decoration-style.

Unfortunately, Firefox is the only browser that supports these new properties, and (I’m assuming, for backwards compatibility), doesn’t support them in the shorthand yet.

Try the demo below in Firefox:

See the Pen HapgB by SitePoint (@SitePoint) on CodePen.

The demo is using the longhand values to do this. This ultimately will be a tough one because currently any browser that sees an extra value in text-decoration will nullify the entire declaration, which is clearly not good for backwards compatibility.

8. The border-width Property Accepts Keyword Values

Not exactly earth-shattering, and this isn’t new, but, in addition to standard length values (e.g. 5px or 1em), the border-width property accepts three keyword values: medium, thin, and thick.

In fact, the initial value of the border-width property is “medium”. The demo below uses “thick”:

See the Pen border-width keyword “thick” by SitePoint (@SitePoint) on CodePen.

When browsers render these keyword values, the spec doesn’t require that they map them to specific length values, but, from what I can see, all browsers seem to use 1px, 3px, and 5px.

9. Nobody Uses border-image

I wrote about the CSS3 border-image property on SitePoint a while back. The feature is supported in all modern browsers except IE10 and below. But does anybody care?

It seems like a really neat feature, allowing you to create border images that are fluid. Use the resize handle in this demo to test it out:

See the Pen border-image demo by SitePoint (@SitePoint) on CodePen.

Unfortunately, border-image seems like a novelty that not many people are using. But maybe I’m wrong. If you know of any examples of border-image in use on a real project, or if you’ve used it, please let us know in the comments and I’ll be happy to admit I was wrong.

10. There’s an empty-cells Property

This one has support everywhere including IE8, and it looks like this:

table {
  empty-cells: hide;

As you probably figured out, it’s used for HTML tables. It tells the browser whether to show or hide table cells that have no content in them. Try the toggle button in this demo to see the effect of changing the value of the empty-cells property:

See the Pen empty-cells demo by SitePoint (@SitePoint) on CodePen.

In this case, I had to ensure the borders were visible and not collapsed and I had to add some spacing between the cell borders. In some cases, this property would have no visual effect because there needs to be something visible on the table for this to make any difference.

11. The font-style Property Accepts a Value of “oblique”

Just about every time you see the font-style property, it’s used either with a value of “normal” or “italic”. But you can also give it a value of “oblique”:

See the Pen italic vs. oblique by SitePoint (@SitePoint) on CodePen.

But what exactly does that mean? And why does it look the same as italic?

The spec explains that the value “oblique”…

“…selects a font that is labeled as an oblique face, or an italic face if one is not.”

The description of “italic” in the spec is basically the same. The word “oblique” is a typographic term that basically represents slanted text, but not a true italic.

Due to the way CSS handles oblique text, it’s interchangeable with italic unless (as the spec explains) the font being used has a face that is identified as oblique.

I’ve never heard of a font that actually has an oblique face, but maybe I’m wrong. From the research I’ve done, it seems that it’s wrong for a font to offer both italic and oblique faces, because oblique is supposed to be a faux version of italic on fonts that don’t have a true italic.

So, if I’m not mistaken, what this means is if a font does not have a true italic face, setting the CSS to font-style: italic will actually display the font as font-style: oblique.

12. word-wrap is the Same as overflow-wrap

The word-wrap property is not used too often, but it’s very useful in specific circumstances. One often-used example is to help long unbroken strings of text (like URLs) to wrap, rather than break out of their container. Here’s an example:

See the Pen word-wrap demo by SitePoint (@SitePoint) on CodePen.

Because this was originally a Microsoft creation, this property is supported in all browsers including Internet Explorer all the way back to IE5.5.

Despite cross-browser and, from what I can see, consistent support, the W3C decided to replace word-wrap with overflow-wrap — I’m guessing due to the former name being considered a misnomer. overflow-wrap has the same values as word-wrap, and word-wrap is now considered “an alternate syntax” for overflow-wrap.

While a few new browsers do support overflow-wrap, it seems pointless to bother with it since old browsers handle word-wrap just fine, and all browsers are required to continue to support word-wrap indefinitely, for legacy reasons.

We can start using overflow-wrap when all in-use browsers auto update — but until then, I don’t see a point in changing from the old syntax.

How Many of These Were New To You?

Did you learn anything from this post? I hope so. Probably most experienced CSS developers knew many, if not all, of the above points. But likely those newer to CSS would benefit more from these.

It would be interesting to see how many of these points were new to our readers. Post a comment below telling us how many were new to you (e.g. 6/12, 4/12, or whatever).

Pick up loads more CSS hints and tips with a Learnable membership. You’ll get access to dozens of books and courses, including best-sellers like Jump Start CSS, The CSS Anthology and more.

Tags: css facts, css tips, css tricks, w3c css
Louis is a dev blogger at Impressive Webs, author, and is currently SitePoint's HTML and CSS editor. He loves all things front-end, and curates Web Tools Weekly, a newsletter for front-end developers primarily focused on tools.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

  • Bas Hepping

    So, I’ve just had that problem with the bullets in the first item.I solved it with images for every dot. Never knew it was this easy. Thank you!

  • Patryk Hes

    ad 5. It’s not true in Firefox when container has display: flex and flex-direction: vertical. http://dev.w3.org/csswg/css-flexbox/#item-margins

  • http://codelair.com/ Scott

    Haha, when I first heard about border-image I thought “Amazing! I’ll be using this on every website I make!”

    And then border-radius and box-shadow came along and most designs could be accomplished with those. Plus a lot of design has moved away from overly complex styles and borders.

    • http://www.agriffindesign.com Andy Griffin

      I used border-image for building chat bubbles recently. Saved my life. Extremely convenient.

      • LouisLazaris

        Seems like rounded corners and shadows would be enough even for a chat bubble… Of course, if the bubble is more complex (kind of like a cloud) then yeah, border-images would be perfect.

  • Oluwafemi William Babalola


  • Owen Masback

    “top and bottom position values, are likewise calculated based on the width of the container, rather than the height.”

    not true

    • LouisLazaris

      Good catch, you’re right, it’s relative to height. I’ll correct that… and I had it right in my original article and forgot:


      • dude

        Stil not corrected. Could you? It got me really confused for a moment.

    • LouisLazaris

      And here’s proof that Owen is correct:


    • http://www.purplepier.com.br Carlos Garcia


    • Moose

      Boy, would I be in trouble if it was true :p

  • Pavel Dvořák

    6/12 :D

  • Asif Khan

    Nice article, really I haven’t used a some of them for my entire life :D Thanks

  • Frederik Van Zande

    Vertical Percentages are Relative to Container Width, Not Height

    They are relative to container height, when the element you want to give vertical height, is positioned absolute or fixed.
    Counts for height, top & bottom.

  • LouisLazaris

    Excellent point. That would probably be worth a write up in itself. Thanks.

  • http://www.muhammedak.com/ Muhammed A K

    8/12 :)

  • Victor Liew Jia Hao

    overflow-wrap is new to me :)

  • Stéphanie Walter

    “Nobody Uses border-image” : this one is so true. I’ve never seen a great tutorial showing cool examples using this property. I’m also wondering if there is a way to do cool stuff using .svg images, might dig into it some days :)

    I admit I did not know point 5 ^^

  • http://grochtdreis.de/ Jens Grochtdreis

    I am waiting for a good idea to use border-image. In the meanwhile I would like to know why the border-image doesn’t show in my Firefox 28 (Mac). The CSS isn’t Webkit-only, so it should show. But it doesn’t: http://monosnap.com/image/rQuLeYRNMrzK4F2OgClfH8OEnUlptR

  • http://memmie.lenglet.name Mem’s

    Note that Firefox now requires `border-style` to be set (with value like `solid`) for `border-image` to work:

  • Wakkos

    Regarding the first tip, you actually can change “inherit” for what Lea Verou calls “the first CSS variable”: currentcolor.

    • Bundyo

      On the bad side – some mobile browsers don’t support currentcolor.

    • LouisLazaris

      I originally was planning to do like 20 tips and currentColor was supposed to be one of them. Maybe another article… ;)

  • evo

    I’ve used border image on real projects before, good for non symmetrical borders.

    Used here for the picture frames.

  • Anas Ramadan

    I’m wondering if I can give the only the bullet (or marker) on the unordered list and the number marker on the ordered list a different color?

    • terrell harris

      It should be possible. The fiddle I created seems a little weird, but it works: http://jsfiddle.net/6MBde/

    • Gareth

      you could give the li a colour and enclose it’s content in a span to change colour

    • LouisLazaris

      Anas Ramadan, Gareth, terrell harris :

      Here’s a bit of a hacky way to do it that works as long as each list item has only one line:


      Notice I’m using the :first-line pseudo-element to change the text, while keeping the bullet as a different color defined on the body.

      • Anas Ramadan

        Interesting :)
        I tried to improve it but didn’t work:
        li:not(:first-line) {
        color: lightgreen;

  • Theracoon

    I use point 5 a lot to make elements using text replacement backgrounds responsive.

    width: 20%;
    Height: 0;
    padding-bottom: 20%;

    • Jussi Tuoma

      I recently learned to use this method on responsive designs. Saved my slider :)

  • Ron Chaplin

    Great Article. I would like to see more implementation of the shorthand for text-decoration. However if not properly used, it may go the way of it’s sibling, “marquee”. Let’s hope not. this would be great to give some uniqueness to sites.

  • Jingqi Xie

    I only know the 5th… But it only applies to paddings and margins, not height, tops or bottoms.

  • Mike

    Your examples which use input type=range sliders should use onchange and not oninput, which does not seem to work in IE (11). At least example 5 uses oninput. Otherwise interesting stuff :)

    • LouisLazaris

      Thanks for pointing that out.

      The reason I did not use onchange is because in Chrome (the browser I develop/test in mainly for articles like this), onchange was not responding immediately to the slider adjustments. Chrome basically waits until you finish sliding before adjusting the values. I liked it better with oninput because the change was instant, almost like an animation.

      Now that I test all three main browsers with onchange, it looks like IE11 is the only one that responds immediately to the changes.

      I have no idea why oninput wouldn’t work in IE11 though…?

      • Mike

        Guess best is to use both event handlers, http://codepen.io/anon/pen/mHhrq is working in FF, IE and Chrome. If on sites like this which are used by probably a lot of people IMHO the examples should work on the widest range of browsers.

        See also http://stackoverflow.com/questions/18544890/onchange-event-on-input-type-range-is-not-triggering-in-firefox-while-dragging

        I filed a ticket for IE though, guess oninput should “simply” ;) be implemented.

      • http://www.caseyjacobson.com Casey Jacobson

        This actually changed about a month ago. Previously Chrome would respond to the change as you dragged the slider. Firefox would not, and they had a pretty good reason why:


        “The primary problem with firing onchange events during the drag is that it then is fired just as often as oninput changes, leaving no event to listen to if one simply wants to know when a change has been committed, by a similar standard to how onchange events work with regard text inputs and the keyboard. ”

        I’ve been developing a site that uses a range slider. When I began Chrome would recognize the change as you were sliding it, but a couple weeks ago that suddenly changed. It appears that they agree with the Mozilla team on their reasoning now, and changed the behavior in a recent update.

  • DanOwen

    9. Nobody Uses border-image

    It’s really a shame, too, since designers would benefit from what it can do. An example of my own which must be viewed in Chrome or Opera to be seen correctly. Safari renders it incorrectly and Firefox, not at all.


    • http://www.lynchland.eu/ Jakub Jedynak

      Use extra ‘border: 48px solid transparent;” and it will work in Firefox

  • Gareth

    the border image example doesn’t work for me in FF v28.0

    • LouisLazaris

      Thanks, it should be working now. For Chrome, I was defining a border-width only, without setting border-style or border-color, so I added this line:

      border: 45px solid transparent;

      which fixed it for Firefox.

      • Gareth

        Yes, it’s working now. I woul like to use it but I can’t ignore all the IE users. Keep up the good work

    • Govind Yaswanth

      To make border-image work in FF & IE>10..!

      Please use border-image-width: (This functions same as border-width!). Also, in this case, there is no need of using !border-style or border-width

  • Miguel Arroyo

    Vertical percentages are relative to container width except to absolute positioned children of relative positioned parents.

  • http://www.redbearded.com/ Cody

    Good read. Much of this I had no idea about!

  • Adam Fisher-Cox

    Oblique fonts are the “italics” of sans-serifs. Helvetica Neue has obliques, for example.

    • http://www.bjornjohansen.no/ Bjørn Johansen

      Oblique fonts are absolutely not the «italics» of sans-serifs. E.g. both the popular open source sans serif fonts Open Sans and Ubuntu have proper italics (extremely easy to spot when looking at the «f»). But it is correct that Helvetica Neue has obliques, not italics.

      • Adam Fisher-Cox

        That’s true, I worded my comment very poorly. My point was more that obliques are not necessarily “faked” italics. Many fonts have specifically-drawn oblique variants.

  • http://www.slatius.nl Arno Slatius

    I actually used the border-image on my own site but unfortunately none of the browsers render it the way I intended it (the black boards: http://www.slatius.nl/experiments ).
    The idea was to use wooden sides (the border image) and to round of the corners with border radius. Most browsers show the image, but don’t apply the border radius. Other browsers to apply the border-radius but don’t show the border-image.
    Note by the way how bad the aliasing of webkit browsers is on the rotated blocks with border-image.

  • Sam

    As Adam Fisher-Cox mentions below, Helvetica Neue has obliques, as do Helvetica and Avenir, and many other mid-twentieth-century typefaces. While these sometimes are actually drawn, as in a true italic, they’re usually formed by mathematically slanting the roman characters. Obliques tend to be less optically “correct” from a typographic standpoint, and most italics will have a single-story a and g, whereas obliques have the same form as the roman. In Helvetica’s case, the roman g is already single story, but you can see the example in the a. To see some sans-serifs with true italics look at Source Sans Pro or Syntax.

    • Martin Gisser

      Oblique/slanted fonts are old and well known in mathematical typesetting,

      Don Knuth writes in the TeXbook (1984),

      — “Slanted roman type was introduced in the 1930s,
      but it first became widely used as an alternative to the conventional
      italic during the late 1970s. It can be beneficial in mathematical
      texts, since slanted letters are distinguishable from the italic
      letters in math formulas. The double use of italic type for two
      different purposes—for example, when statements of theorems are
      italicized as well as the names of variables in those theorems—has led
      to some confusion, which can now be avoided with slanted type. People
      are not generally agreed about the relative merits of slanted versus
      italic, but slanted type is rapidly becoming a favorite for the titles
      of books and journals in bibliographies.”

  • SixKnight

    oblique and italic are a bit different. If a font has an italic face and you set font-style: italic; it takes this font. If the font has no italic face it’s displayed like oblique. Oblique is same BUT if no oblique font is available, the browser do automatic incline the font. So mostyl italic will look better because it’s a own font type – not just the browser which just incline the font.

  • http://blog.sitesahoy.com/ DJ Madeira

    I used border-image for a slider in a web project very recently.
    First with the slider on the homepage, and also with the footer widgets at the bottom. Particularly with the footer widgets, I don’t think it would have been possible any other way.

  • http://rocketcheetah.com/ Chimpanzee

    I’ve never used it myself but there’s a nice use of border-image on http://lbp.me/

  • Orangestar

    I’m willing to bet border-image isn’t being used because it doesn’t work on Mobile Safari (at least). Mobile Internet is hot right now.

    • LouisLazaris


      I just tested two examples of border images on Safari on iOS7, and they both work fine. I’m not sure why you said it doesn’t work..?

      See support chart here: http://caniuse.com/#feat=border-image

      • Orangestar

        Hm, I just tested them again today and now they… Work?

        Well uh… I profusely apologize for doubting you!

        • LouisLazaris

          No problem… It might have been that you were testing one where the syntax was slightly off or something weird like that…?

  • Sarakio

    You have forgotten about the word-break property used instead of word-wrap.

  • T.J. Crowder

    The `border` shorthand property (http://www.w3.org/TR/CSS2/box.html#propdef-border) is border-width, border-style, then border-color, not border-style, border-width, and border-color. Just FWIW. Not like the browser won’t probably figure out what you mean.

    Edit: See Louis’ second comment below: The spec DOES say order doesn’t matter, it’s just subtle about it.

  • http://www.sicdesignstudios.com/ Zach Kelly

    Awesome article! I pretty much didn’t know any of these elements could be used in the way they were listed here. I’m quite new to the different techniques of CSS3 so this was interesting to read in the the least so thank you for the good read!

  • LouisLazaris

    The order doesn’t matter. Try it. You can put it in any order you want, and the browser will parse it correctly.

    • T.J. Crowder

      @LouisLazaris:disqus: The spec doesn’t say the order doesn’t matter. Again, as I said, it’s not like the browser can’t figure it out since at present the property values are distinct, but that’s not the same thing as there not being an order.

      • LouisLazaris

        I’m not sure what you’re trying to say here. I don’t think the spec ever says anything about order for shorthand unless it actually makes a difference. For example, I assume it says something about font shorthand requiring that the font-family be declared last, which is true (but I can’t find it; MDN mentions this though).

        The order for border shorthand doesn’t matter, and it never will. A border-width value will always require a unit value, whereas border-style is always going to require a keyword value. Those cannot be confused by the browser, so order doesn’t make a difference. The same is true for other shorthands.

        Other shorthands are slightly different. For example, margin sets top, right, bottom, left, in that order. But those are always unit values, so they aren’t going to be mis-parsed by the browser.

        But hey, if you can show me something in the spec that says that they must be declared in that order to be recognized as ‘standard syntax’ or something like that, then I’ll gladly retract. :) But, as it stands, I don’t think what you’re saying is correct.

      • LouisLazaris

        Ah, I found it… here’s your answer:


        As they mention there in the answers, when the spec shows you a shorthand with a double bar in between values, this means the values are optional and they can appear in any order. This is further confirmed by MDN’s “Value definition syntax”:


        Anyhow, sorry if I was combative about this, but I guess I knew it didn’t require an order and just wanted you to understand that. Best to have proof though…. And this certainly would make an interesting follow-up article too. Thanks for bringing it up.

        • T.J. Crowder

          Ah, thanks, the spec DOES say order isn’t significant! I just didn’t know how to read the spec. Rather than meta-links, here’s the spec: http://www.w3.org/TR/CSS2/about.html#value-defs As Louis said, the money quote is “A double bar (||) separates two or more options: one or more of them must occur, in any order.” Cheers, Louis!

  • Bryan

    I noticed this too. Haha!

  • Bryan

    Great facts. Great read. :)

  • mask

    I know four of them, border, background, border-image, font-style:oblique :)

  • DanOwen


  • Ember

    Color is also applied to text-shadow and box shadow if there is no color specified.

  • http://www.dumplingmag.com/ Justin McCraw

    Those new text-decoration attributes seem handy, but too bad the browser support isn’t there. I don’t know how many times we use a wavy graphic in place of this thing that’s native to at least Firefox. Great write up!

  • DanOwen

    Doesn’t work for me. ;(

    • Govind Yaswanth

      Dear @DanOwen:disqus …

      In your style sheet just add ‘border-style: solid’ (for “.sidebar-first-inner”)

      Problem will get resolved.!

      • DanOwen

        Fantastic, works beautifully. Thank you so much!

        Just added it to the style ‘paleolithic’ that is applied there.

        • Govind Yaswanth

          Even it also works on IE.!

        • HT154

          FYI: It appears to work perfectly in—the pre-release at the moment—Safari 8.0

  • LouisLazaris

    You’re spoiling the next article! :)

  • LouisLazaris

    Good one, thanks!

    Here is a demo:


  • LouisLazaris

    Arno Slatius

    You can fix the antialising problem in WebKit very easily. In your CSS, you have the following line of code in the section.experiment selector rule set:

    -webkit-transform: rotate(-2deg);

    Change that line to the following:

    -webkit-transform: rotate(-2deg) translate3d(0,0,0);

    And it will fix it. I’ve already tested it, it works.

    Now, as far as the border-image in different browsers: It looks like it works for me in IE11, latest Chrome, and latest Firefox. Which browser do you see it failing in?

    • http://www.slatius.nl Arno Slatius

      Thanks for the tip on the rotation. I added it and it looks better now, it’s a bit of a hack though.

      I’m an Opera user. I feel they messed up when they went with webkit so I’m still using 12.16 (although I’m getting more and more doubts, but I haven’t found the right alternative). It’s an ‘old’ browser these days and it doesn’t understand border-image.

      On the other hand, none of the new browsers combine these rules:

      border-radius: 30px;
      border-image: url("../images/woodV.jpg") 30 30 repeat;

      And since Opera doesn’t render the borders it’s the only one that shows the border radius correct.

      • Pietro

        And why the heck are you still using opera? An web developer should use the best and most update browser with no doubt

    • Romulo_Ctba

      wow, that was cool

  • LouisLazaris


    My initial reaction is that you can accomplish the same thing using backgrounds. In your case, your repeating image is only top and/or bottom, going horizontal. So you don’t have a corner image for your border-image. Therefore, my feeling is that you could accomplish the same thing with just regular backgrounds, maybe with multiple backgrounds, and you’d have a little more browser support (but not much).

    For sure the footer widget one could be done with a single background, because that would just be the top or bottom of a widget, not both.

  • LouisLazaris

    Good find… I couldn’t track that down in the spec. No surprise, since it’s pretty much a mess… :( Thanks for that.

  • http://hugogiraudel.com/ Hugo Giraudel

    And drop-shadow filter as far as I know.

  • Samuel Bohler

    Like others, I’ve also run into situations where I had numerous elements heavily laden with box-shadows and border-radii. The scroll performance was abysmal, and then I swapped out the effect for a pre-rendered border-image. Performance improved to very smooth scrolls, and there was the added side effect of pixel perfect duplication across browsers since they render box-shadows slightly different. They have their use.

  • http://pancaketheorem.com Jenn

    I use border-image for this Polaroid-esque border generator: http://pancaketheorem.com/stuff/polaroid/

  • Govind Yaswanth

    Guys, actually, who ever replying a problem with border-image in Firefox & IE…!

    It is because of failing to declare the ‘border-style’ & ‘border-width’ property.!(No need for color property setting to ‘transparent’..)

    Some times, border-image-width can solve the issue.! (in this case, there is no need to set border-style property!

    But, if we are setting border-width property, border-style should be set for FF & IE.!


  • http://www.joezimjs.com Joe Zimmerman

    The only place I’ve seen border-image used (that I’m aware of) is in the Zurb Playground: http://zurb.com/playground/awesome-overlays

  • Ryan

    I used border-image on http://marquettecajun.com/lagniappe/ to achive the to match texture to the sketched texture of the illustrations (link is to a subpage because the client insisted an auto-play video on the homepage).

  • Thomas Breheny

    border-image used here to create a faded outline on the bottom of a DIV just below the yellow play button. Rather than an image – a gradient is used. It was pretty hard to get a working gradient that had the desired effect though. My hunch is it probably only works on Chrome too. I need the vendor prefix to get it working at all.


    .strap {
    border-color: #efefef;
    border-image: -webkit-linear-gradient(0,#fff,#ebebeb,#fff) 20 stretch;

  • LouisLazaris

    Similar to another comment made on this post, to me it doesn’t seem like you need a border image for that one. You can do the same thing with just a regular background, positioning it at the bottom. And if necessary, you can use multiple backgrounds.

    • Thomas Breheny

      That would be nice – it needs to be a really fine, 1 pixel line though, I’ve had trouble getting gradients across a single pixel, it tends to fuzz out top and bottom. Have you got any links to the sort of thing you mean. One advantage of the border approach is that you do at least fall back to the flat border color, if the CSS3 gradient isn’t supported.

  • LouisLazaris

    Very nice, that’s a good use case for border image because it requires the that the corners and border be unique and the whole thing be fluid.

  • LouisLazaris

    Nice. It’s amazing what you can do with California Style Sheets, huh? :)

  • carol mckay

    There is also td:empty like :before or :after which I used to add a background image on this site: http://www.franklintateestates.com.au/contacts/

  • Dustin Dempsey

    jQuery Touch uses border-image for the iOS style buttons:

    A pretty good use case.

  • LouisLazaris

    With gradients you could still fall back to an image on the background, so the fallback wouldn’t be a big deal. Of course, ideally, it’s not great to have to rely on images and gradients.

    But regarding the fine line you wanted, yeah I guess if the gradient doesn’t look right as a background then the image would be better.

    I’m actually amazed at how many people have posted here that they use border images, it’s nice to see it’s not as useless a feature that I thought it was! :)

  • http://wojtek.im/ Wojtek W.

    That’s a great resource. Thanks!

  • http://blog.arunace.com Arun Sengupta

    These are pretty good points you picked out, and I do admit … a lot of things I’ve read but either I’ve forgotten or never really used before.
    A few of them are actually extremely useful, and I should start using them :P at least after reading this blog :D
    Good Stuff !!!

  • http://www.slatius.nl Arno Slatius

    I user all browsers of course and a few VMs on the side for the older and other OS browsers.
    I just find myself going back to Opera for my daily stuff… I’m probably getting old and melancholic.

  • Govind Yaswanth

    Please give property border-image-width a value, which will be more meaning ful..!

  • Govind Yaswanth

    Please give property border-image-width a value, which will be more meaning ful..!

    & will solve issue in IE & Firefox!

  • http://geek.bluemangointeractive.com Siebe Hiemstra

    We might just create a new blog for this kind of secret things :). I know i’d love it.

  • Trever

    I’m an old dog, but you’ve taught me some new tricks here.

    One of the gotchas I like to tell people about is font-family: fantasy.

    Read more about that and other generic font-families via the spec: http://www.w3.org/TR/CSS2/fonts.html#fantasy-def

  • http://sociao.tumblr.com/ Chris Lowles

    Surprisingly didn’t know about the word-wrap property having a dupe with a different name, thanks for the heads up, I might us it as a fallback in the future.

  • Karl

    I use border-image to achieve retina pixel thin borders in a webview for ios7

  • vapenation

    8/12 were new to me! Good article and great examples.

  • http://exyr.org Simon Sapin

    > 5. Vertical Percentages are Relative to Container Width, Not Height

    This is not true in general, only for margins and padding. There are plenty of vertical percentages (e.g. in the ‘height’, ‘top’, or ‘background-position’ properties) that refer to the height of the containing block. Each property definition table has a “Percentages” line that defines this case-by-case. For example, compare:


    • LouisLazaris

      Yeah, TBH, that section should be renamed to “Vertical Margin/Padding Percentages are Relative to Container Width, Not Height”

  • krystian

    actually, according to http://www.w3.org/TR/css3-background/#the-background, you should write in #the-background-shorthand-property-has-new-values something like:

    background: [background-image] [background-position] / [ background-size]
    [background-repeat] [background-attachment] [background-origin]
    [background-clip] [background-color];

    at least I understand it as above ;)

  • http://drewlustro.com/ Drew Lustro

    Been a web developer for 15 years and I was surprised that I didn’t know 9 or so of these. Thanks for writing, was a quality quick read.

  • Tim Nguyen

    I know most of these except for empty-cells (I never use tables anyway).
    Also, for color, you can use currentColor to inherit the color to other properties.

  • http://iulianonofrei.com/ Onofrei Iulian

    I did used border-image on a test website in which i replicated windows explorer UI

  • Liam O’Leary

    Great little article! Didn’t know about the color on hr’s, that’s useful.

  • JoshuaMuheim

    Thanks a lot for your effort! While having heard of many of them already, most weren’t very present anymore. So I have to admit a score of about 9/12 or so. But this means I (re-) learnt a lot today, yay! :-)

  • Elliot Smith

    I used border-image-width in this slider puzzle project (for the slide out menu elements): http://townxelliot.github.io/slider-puzzle/. NB this probably only works in very recent Chrome and Firefox; never tested on IE.

  • zcorpan

    As for usage of ‘border-image’, see http://www.chromestatus.com/metrics/css/popularity#border-image — it’s less common than ’empty-cells’ but there’s also a long tail of even less commonly-used properties.

  • zcorpan

    Doesn’t a 0.5px normal border work?

  • http://cybernext.in vin

    Knew all of these, apart from ‘color’, ‘collapse’, and ‘oblique’ property.
    Though I’m most surprised about the color property, even after years of using it, never realized this!
    Interesting one!


  • LouisLazaris

    What isn’t corrected?

    Owen’s comment quoted a part of the article that I’ve now removed. That’s the correction, that I said that top/bottom position values were relative to width. But they’re not, they’re relative to height, so I removed that statement from the article.

    Was there something else you’re referring to?

    • ed

      No, you’ve not yet corrected – unless am not getting your point. On this article you say…

      5. Vertical Percentages are RELATIVE TO CONTAINER WIDTH, Not Height

      This one is a tad bit confusing at first, which I’ve written about before.
      While you might know that percentage widths are calculated based on the
      width of the container, percentages on properties like top and bottom
      padding and top and bottom margins ARE LIKEWISE CALCULATED BASED ON WIDTH of the container, rather than the height.

      Owen Masback says…
      “top and bottom position values, are likewise calculated based on the width of the container, rather than the height.” not true.

      You agree with him. Then you say you have since corrected accordingly. So which/who is right?

  • http://www.pro-image.co.il Michael C.

    6/12 – thanks for checking my “learn something new every day” box!

  • Aditya Saxena

    Love the list. thanks! and since I knew how top and bottom position values work, I think I might have subconsciously ignored the mistake. Thanks!

  • Govind Yaswanth

    works on >IE10

    • Elliot Smith

      Nice to know!

  • http://kutec.co.in/ Kushal Jayswal

    Is “word-wrap” working in IE8?

    • LouisLazaris

      Yes, it works everywhere, even back to IE5.5, as the article mentioned.

  • Dustin Horton

    I’ve actually found `border-image` to be very useful. Used in several places here: http://boarshead.com/palatepersona

  • LouisLazaris

    Hi ed. @owenmasback:disqus is referring to the “top” and “bottom” properties, which are used along with “position: relative” and “position: absolute”. The paragraph you quoted is referring to top and bottom “margin” and “padding” values. Those are not the same as “position” values. Originally, the article also said “position” values, but I removed that part, because, as Owen and others have pointed out, that’s not correct.

    Does that clear things up?

  • LouisLazaris

    Of course, now that I think about it, I should probably add a note about that, or maybe change the heading so it’s not so all-encompassing.

  • mekstines

    the border properties actually caught my attention!

  • http://chillopedia.com/ Nadeem Khan

    “border-image” takes the cake!

  • Julia Dizhak

    I think shorthand for border should be in next order: border-width border-style border-color.
    border: 1px solid #000; But you use another order

  • http://edmundojr.com/ Edmundo Junior

    Didn’t know about the background shorthand with background-size. Really handy, thanks man.

  • Rio Brewster

    I’ve used border image to do things like the blackboard here:


    But the syntax is pretty convoluted. I had to use the border image generator.

    As we get away from porting print designs to the web, there really isn’t much need for this.

    Why oh why can’t we get something useful like “text-decoration: 1px dotted #ccc” instead

  • _dejareve

    great article, now i´m ready to read the sequel :p

  • http://bloggerever.com/ Mohammad Hamza

    This one is putting my CSS knowledge to shame, only knew that border inception concept nothing else. Thanks anyway :)

    Also read you sequel of this post and that one more than amazing, looking for more.

  • Vasulu Saya

    I knew 11 out of 12.

  • http://yahyazini.com/ Yahya Zini

    Just stumbled upon this gem of an article. Thanks a lot for sharing!

  • Imamadmad

    I once used a border image on a website I made so I could get the corners to jut inwards instead of their regular outwards. That’s the only time though, and it didn’t go particularly well TBH. It’s not an easy property to use, and my image wasn’t quite crisp enough so there is still a little bit of colour leakage where the sections in the original picture crossed over, leaving a feint extra border around the content on high quality screens.

Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.