Galen Gidman

Front-end and WordPress developer

CSS Idea: border-offset

Step 1: Come up with a super-cool idea for a new CSS property. Done!

Step 2: Share the idea with the world, have it widely acclaimed and become famous.

Uh—

Ok, well I’m just kidding. I know that this idea will probably not earn me fame and fortune (bummer), but I thought I’d write about it anyway. It’s been turning in my mind lately that CSS should really have a border-offset property. Here’s how I think it might work…

.some-class {
    border: 1px solid #000;
    border-offset: 5px;
}

In this case, a black border, 1px thick would be 5 pixels to the outside of the element. You could even do something like this and make the border offset negatively to the inside of the element, like so:

.some-class {
    border: 1px solid #000;
    border-offset: -5px;
}

I’m sure that were this concept to actually come into fruition, it would be included in the border shorthand. I’m thinking that since the addition of border-offset would add another value that could easily be confused with border-width (since they both are measurements), it might work somewhat like the font shorthand where the font-size and line-height are separated by a forward slash. Maybe it would look something like:

.some-class {
    border: [width]/[offset] [style] [color];
}

… or in a real application …

.some-class {
    border: 1px/5px solid black;
}

This would give the element a solid, black 1 pixel thick border offset positively 5 pixels.

I’m pretty sure that there will never be a border-offset property, but I think that it’s a cool idea anyway.

3 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *