Box Styling Demo

1. background-color

A box with a background color

.bg-demo {
  background-color: #e8d5c0;
  padding: 16px;
}

2. border

A box with a visible border

.border-demo {
  padding: 16px;
  border: 2px solid #c49a6c;
}

3. border-radius

A box with rounded corners

.radius-demo {
  padding: 16px;
  border: 2px solid #c49a6c;
  border-radius: 20px;
}

4. padding

More space inside the box

.padding-demo {
  padding: 32px;
  border: 1px solid #d8cab8;
}

5. margin

This box has extra outer space below it

The gap comes from margin

.margin-demo {
  padding: 16px;
  border: 1px solid #d8cab8;
  margin-bottom: 24px;
}

6. width

A fixed-width box

.width-demo {
  width: 240px;
  padding: 16px;
  border: 1px solid #d8cab8;
}

7. max-width

This box can grow, but only up to a maximum width.

.max-width-demo {
  max-width: 320px;
  padding: 16px;
  border: 1px solid #d8cab8;
}

8. Combined card styling

Background, border, radius, padding, and width can be combined to create card-like UI blocks.

.combo-demo {
  width: 100%;
  max-width: 420px;
  background-color: #fff7ec;
  border: 1px solid #d6b58a;
  border-radius: 18px;
  padding: 24px;
}