Faster Borders in CSS Files

There’s been a lot of talk about minifying CSS files and optimizing your code. There’s tons of shortcuts, but I still see a common theme in most CSS files.

A Box with A Border around 3 Sides

.box {
    border-top: 1px solid #cecece;
    border-left; 1px solid #cecece;
    border-right: 1px solid #cecece;
}

If you only want a border around 3 sides of a box, most people type out 3 lines, but you can easily do this with two.

Same thing, only faster

.box {
    border: 1px solid #cecece;
    border-bottom: none;
}

By using the overwrite rule in CSS, you can just cut out the side you don’t want a border on. I realize this isn’t anything special or new, but every line counts when you’re trying to optimize your files.