Border TRouBLe, a CSS shorthand tip!

TRouBLe is a mnemonic, a learning aid... for CSS values for border, padding and margins

Instead of writing:

• border-top-width: 2px;
• border-right-width: 3px;
• border-bottom-width:4px;
• border-left-width:3px;

 

 

 

 

You can just write border-width: 2px 4px 6px 8px;

The order is Top, Right, Bottom, Left easily remembered with the word TRouBLe!

Also if you don't want the right side to have a  value at all, instead of writing 0px, don't add the unit, just write 0

For example:

border-width: 2px 0 6px 8px;