Rarely Used CSS Properties

The Column-Rule Property

CSS columns is a layout method which can divide an element into columns. A common usecase is to divide a paragraph text into two or more columns. The interesting bit is that we can add borders between the columns. The column-rule property name might not reflect it’s purpose, but you can imagine it as a border right!


Background Repeat Round

This property repeats the background in both directions but it never crops the image unless a single image is too large to fit. If multiple tiles can fit, it squishes or stretches appropriately.

Styling List Markers

It’s a perfectly reasonable to want to style the marker of list items. You know: blue bullets with black text in an unordered list. Or red counters with knockout white numbers in an ordered list.

Display: inline-flex

Useful for displaying inline elements with flex functionality.


Object Fit

Object fit is used to specify how an img or video should be resized to fit it’s container.

Margin: Auto with Flexbox

Combined with flexbox, margin: auto can easily center a flex item horizontally and vertically


View source code for all above examples here: Link

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: