<div class="alert">Success alert</div>
<div class="alert error">Error alert</div>
<div class="alert info">Info alert</div>
<div class="alert" style="--hue: 280">Alert with</div>
.alert {
  --hue: 120;
  border-color:     hsl(var(--hue), 50%, 40%);
  color:            hsl(var(--hue), 50%, 20%);
  background-color: hsl(var(--hue), 50%, 90%);
}

.error {
  --hue: 0;
}

.info {
  --hue: 220;
}





















.alert {
  display: inline-block;
  padding: 10px 15px;
  border-radius: 5px;
  margin: 10px;
  font-size: 16px;
  border-width: 2px;
  border-style: solid;
}


.alert[style]:after {
  content: " " attr(style);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.