back to top

info(at)sypo.uk01539 741461

Shortening CSS: Border Shortcut

Posted on 10th September, 2018

By Mark Syred. Difficulty level: Basic

There is much written about borders in css across the internet, but I wanted to add to the plethora of information by sharing two tricks for achieving more with borders with less typing.

This will be the third of a brief series of posts on shortening your css, something that is becoming increasingly important the more people access the internet on their phones, often without WI-FI access. Every letter, character, space or line-break you can shave off your css, saves one byte of data having to be downloaded. But, as such practice makes it harder for humans to read, in this blog, I'll be preserving the white space.

Combining different border attributes

There's plenty of ways to style your border in css, using: border-width; border-color; border-style; border-width; border-radius; and border-image. There are several other attributes, but combining three of these with the shorthand property, border, can produce a quick, easy effect, compatible across all browsers. border-width, border-style, and border-color, can be written together like this:

border: 5px solid red

This, surprisingly, produces a solid, red, 5 pixel wide border, as illustrated by this paragraph.

Successive divs can have different borders, coloured not just using HTML colour names but Hex code and even rgba colours to produce translucent borders.


.html-colour-border {
border: 5px solid blue;
}
.hex-colour-border {
border: 10px dotted #ff9600;
}
.translucent-border {
border: 15px double rgba(255,0,255,0.8);
}

A single div can have all four of its borders - top, right, bottom, left - styled differently as well

Shorthand for differently styled borders

If you wanted to, as shown by the borders around this paragraph, each of the four borders can be styled to be completely different. There is a long way to achieve this and a short way. The short way uses the attributes employed above, but in an alternative fashion.

The long way

#different-borders {
    border-top-width: 5px;
    border-top-style: solid;
    border-top-color: #ff0000;
    border-right-width: 10px;
    border-right-style: dotted;
    border-right-color: #ff9600;
    border-bottom-width: 15px;
    border-bottom-style: double;
    border-bottom-color: #aeaeae;
    border-left-width: 20px;
    border-left-style: dashed;
    border-left-color: #eeee00;
}

This same effect can be achieved with only four lines of css code...

The short way

border-width, border-style, and border-color are themselves css shorthand properties, in the same way that margin and padding are. All four sides of a div can be targeted in the same arguement, in the order: top, right, bottom, left.

#different-borders {
    border-width: 5px 10px 15px 20px;
    border-style: solid dotted double dashed;
    border-color: #ff0000 #ff9600 #aeaeae #eeee00;
}

This website uses cookies to deliver the best experience whilst browsing. More info