CSS Decorations

Rounded corners

rounded-lg

Css

Black background

bg-dark

Css

Yellow border

border border-warning

Css

Shadow, white bg, rounded

shadow-lg p-3 mb-5 bg-white rounded

Css

Mixed (dark bg, yellow border and rounded corners)

rounded-lg border border-warning bg-dark

Css

Mixed2 (yellow border, rounded corners, shadow)

rounded-lg border border-warning shadow-lg p-3 mb-5 bg-white rounded

Css

Hot pink test

test

Css

.test {
background-color:hotpink;
}
.test .h1 {
font-weight:bold;
letter-spacing:.5em;
}

Shadow2

Css

.shadow2 {
  box-shadow: 10px 10px 5px lightblue;
}

Rounded corners2

rcorners2

Css

.rcorners2 {
border-radius: 25px;
padding: 20px;
}

Rounded corners3

rcorners3

Css

.rcorners3 {
  border-radius: 25px;
  border: 2px solid #73AD21;
  padding: 20px;
  width: 500px;
  height: 250px;
}

Background image

background

Css

.background {
  background-image: url(/files/images/img_flwr.gif), url(/files/images/paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
  border: 2px solid #73AD21;
  width: 800px;
}

Background full width

background

Css

.background {
  background-image: url(/files/images/img_flwr.gif), url(/files/images/paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
  border: 2px solid #73AD21;
  width: 100%;
}

Border image

borderimg

Css

.borderimg { 
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(/files/images/border.png) 30 round;
}