Various background patterns for borders, dots, and checks drawn with CSS

Equally spaced stripes

If you want to change the spacing, adjust "12px" and "24px" (which should be twice the first value) as appropriate.

.bg_dot {
	background: linear-gradient(90deg, #ffc3a0 12px, #ffafbd 12px) 0 0 / 24px 24px;
}

Unequally spaced stripes

Example with an area ratio of 1:5

"4px" and "20px" are set to a 1:5 ratio.

.bg_dot {
	background: linear-gradient(90deg, #859FFA 4px, #4B60AD 4px) 0 0 / 20px 20px;
}

3-color stripes

Adjust the values "8px", "16px", and "24px" to be in a "1:2:3" ratio as appropriate.

.bg_dot {
	background: linear-gradient(90deg, #f78ca0 8px, #f9748f 8px, #f9748f 16px, #fe9a8b 16px) 0 0 / 24px 24px;
}

4-color stripes

Don't think, feel.

.bg_dot {
	background: linear-gradient(90deg, #3d3393 12px, #2b76b9 12px, #2b76b9 24px, #2cacd1 24px, #2cacd1 36px, #35eb93 36px) 0 0 / 48px 48px;
}

Diagonal stripes (diagonal borders)

Use the repeating-linear-gradient function.

.bg_dot {
	background: repeating-linear-gradient(-45deg, #c1dfc4, #c1dfc4 12px, #deecdd 12px, #deecdd 24px);
}

3-color diagonal stripes

Adjust "12px", "24px", and "36px" to be in a "1:2:3" ratio.

.bg_dot {
	background: repeating-linear-gradient(-45deg, #ff8177, #ff8177 12px, #cf556c 12px, #cf556c 24px, #b12a5b 24px, #b12a5b 36px);
}

Simple checks

.bg_dot {
	background-color: #ffecd2;
	background-image: linear-gradient(-90deg, transparent 12px, #ffecd2 12px), linear-gradient(transparent 12px, #fcb69f 12px);
	background-position: 12px 0;
	background-size: 24px 24px;
}

Alternating checks

This is apparently called a gingham check.

.bg_dot {
	background: linear-gradient(45deg, #f6d365 25%, transparent 25%, transparent 75%, #f6d365 75%), linear-gradient(45deg, #f6d365 25%, transparent 25%, transparent 75%, #f6d365 75%);
	background-color: #fda085;
	background-size: 40px 40px;
	background-position: 0 0, 20px 20px;
}

Spaced checks

.bg_dot {
	background-color: #c2e9fb;
	background-image: linear-gradient(-90deg, transparent 6px, #a1c4fd 6px), linear-gradient(transparent 6px, #a1c4fd 6px);
	background-position: 6px 0;
	background-size: 24px 24px;
}

Polka dots

.bg_dot {
	background: radial-gradient(#e2ebf0 30%, transparent 30%) 0 0 / 20px 20px #cfd9df;
}

Spaced polka dots

.bg_dot {
	background: radial-gradient(#fccb90 15%, transparent 15%) 0 0 / 40px 40px #d57eeb;
}

Alternating polka dots

.bg_dot {
	background-color: #4B60AD;
	background-image: radial-gradient(#859FFA 4px, transparent 4px), radial-gradient(#859FFA 4px, transparent 4px), radial-gradient(#fff 4px, transparent 4px);
	background-position: 60px 60px, 20px 20px, 0 0;
	background-size: 80px 80px, 80px 80px, 40px 40px;
}