back to top
shopping basket

View your basket

Photo scanning service

What our customers are saying:

Many thanks for your help and excellent service, I will be sending you some more slides.

Read more...

Shortening CSS, Border Shortcut

Shortening CSS, Border Shortcut

PiciScan Web Design Blog RSS Feed

Posted on: Thursday, 7 January 2016

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 first of a brief series of posts on shortening your css, something that is becoming increasingly important the more people access the intermet 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;
}

Mark founded PiciScan in 2010, and sold it in October 2015 to Web By Numbers Ltd, who now employ him! He likes Star Wars, playing escape games and looking after his bonsai tree.

comments powered by Disqus

The Latest From our Scanning Blog

Christmas 2015

Christmas 2015

Posted: 14 December 2015

It’s nearly the time of year to be going up into the loft and bringing down all the Christmas decorations, locating the tree and seeing if those lights from last year still work, or if you need to buy any more...

Read more

The Latest From our Web Design Blog

Box Sizing: Border-Box

Box Sizing: Border-Box

Posted: 24 March 2016

I first came across box-sizing: border-box when it cropped up in a temporary colleague's CSS. I found it pretty annoying when I picked up work that he'd started as it seemed to get in the way. This was because, as I said in a previous post on margin ...

Read more