CSS Backgrounds

Simple inner rounding using 2 div elements

.inner-rounding {
  width: 300px;
  margin: 0 auto;
  background: #8E8DBE;
  padding: .8em;
}

.inner-rounding > div {
  background: #A9E4EF;
  border-radius: .8em;
  padding: 1em;
}

Inner rounding using only 1 div element.

'box-shadow' (no offsets, no blur) has rounding therefore covers gaps left by square-cornered 'outline'

.inner-rounding-box {
  width: 300px;
  margin: 0 auto;
  background: #A9E4EF;
  border-radius: .8em;
  padding: 1em;
  box-shadow: 0 0 0 .6em #8E8DBE;
  outline: .6em solid #8E8DBE;
}

---

Striped background using linear-gradient using colour-stops with same position.

.striped-background {
  background: linear-gradient(#8E8DBE 50%, #A9E4EF 50%);
}

Changing size of stripes using background-size and default repeat of gradient as background-image.

.striped-background-2 {
  background: linear-gradient(#8E8DBE 50%, #A9E4EF 50%);
  background-size: 100% 30px;
}

Unequal width by changing color-stop size

Setting second colour stop to 0 means browser will set it to the previous one.

.striped-background-3 {
  background: linear-gradient(#8E8DBE 30%, #A9E4EF 0);
  background-size: 100% 30px;
}

Three colours using extra values in linear-gradient.

.striped-background-4 {
  background: linear-gradient(#8E8DBE 30%, #A9E4EF 0, #A9E4EF 66.6%, #7A306C 0);
  background-size: 100% 45px;
}

Vertical stripes using gradient direction 'to right' (defaults to 'to bottom').

.striped-background-5 {
  background: linear-gradient(to right, #8E8DBE 30%, #A9E4EF 0, #A9E4EF 66.6%, #7A306C 0);
  background-size: 30px 100%;
}

Diagonal stripes using gradient direction of '45deg', color stops, repeating tile.

.striped-background-6 {
  background: linear-gradient(45deg, #8E8DBE 25%, #A9E4EF 0, #A9E4EF 50%, #8E8DBE 0, #8E8DBE 75%, #A9E4EF 0);
  background-size: 42px 42px;
}

Easier diagonal stripes using 'repeating-linear-gradient()'.

.striped-background-7 {
  background: repeating-linear-gradient(45deg, #8E8DBE, #A9E4EF 30px);
}

Using 'repeating-linear-gradient()' for stripes with adjustable angle.

.striped-background-8 {
  background: repeating-linear-gradient(25deg, #8E8DBE, #8E8DBE 15px,  #A9E4EF 0, #A9E4EF 30px);
}

Flexible subtle stripes by using background colour and hsla and transparent.

.striped-background-9 {
  background: #7A306C;
  background-image:
    repeating-linear-gradient(30deg, hsla(0, 0%, 100%, .1),
                                     hsla(0, 0%, 100%, .1) 15px,
                                    transparent 0, transparent 30px);
}