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.
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…
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:
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
line-height are separated by a forward slash. Maybe it would look something like:
… or in a real application …
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.