Do you use the CSS shorthand properties to save time?
CSS shorthand properties save a ton of time while typing, look crisp and of course, occupy lesser lines of code. But only if you can remember how to use them.
The shorthand properties like border
, background
and font
are easy. For example, you can either write
border: 1px solid red
or
border: solid red 1px
or
border: red 1px solid
Since these values are of different types, the order doesn't matter. Same with background
and font
too.
Not only the order, even if you omit certain values (that is, if you don't specify the border thickness 1px
for instance), initial values will be assumed for those.
But do you know how to use the shorthand properties like margin
, padding
and border-radius
? Do you always have to look them up? Let me help you remember these once and for all :)
Shorthand properties related to edges of a box
The properties margin
, padding
, border-style
, border-thickness
etc apply to the edges of a box. All these properties accept one, two, three or four values.
One value syntax
padding: 30px
When you specify only one value, this value 30px
applies to all four sides. This is simple.
Two value syntax
padding: 0px 30px
When you specify exactly two values, the first value applies to top & bottom (vertical) and the second value applies for left and right (horizontal). This means:
padding: <top & bottom> <left & right>
Three value syntax
padding: 0px 30px 60px
This is the hardest one to remember. When you specify exactly three values, the first value is for top, last one is for bottom. The middle value applies for both left and right. This means:
padding: <top> <left & right> <bottom>
Four value syntax
padding: 0px 30px 60px 90px
When you specify all four values, it applies in this specific order - top, right, bottom, left (clockwise starting from top). This means:
padding: <top> <right> <bottom> <left>
So now you can see that if you omit the last value for <left>
it becomes a three value syntax, so <left>
equals <right>
If you want to play around with the same demo as these screenshots - here's the codepen
Shorthand properties related to corners of a box
The shorthand property border-radius
is slightly different. It's not related to the edges, but related to corners of a box. So in this case:
One value syntax
border-radius: 10px
This applies to all four corners.
Two value syntax
border-radius: 10px 30px
The first value applies for top-left and bottom-right (left or main diagonal). The second value applies for top-right and bottom-left. (the other diagonal).
Three value syntax
border-radius: 10px 30px 60px
The first value applies to top-left. Last value for bottom-right. The middle value is for top-right and bottom-left.
Four value syntax
border-radius: 10px 20px 30px 40px
These apply in this specific order - top-left, top-right, bottom-right, bottom-left (clockwise starting from top-left).
Phew! I hope your head isn't spinning :) If this is the first time you're learning these, a little practice will help you. Let me know if this was helpful.
📘 Complete Guide to CSS Flex and Grid
If you loved this write-up and how it was explained, you’ll absolutely love my eBook CSS Flex and Grid. Check it out!
📨 Newsletter suggestion
I love Tailwind CSS. If you love it too, I highly recommend subscribing to this one 👇
Tailwind Weekly: Weekly newsletter about all things Tailwind CSS. New issue every Saturday.