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.