<div class="wrap">
  <h1>Created by <a href="https://twitter.com/mithicher">@mithicher</a></h1>

  <h2>Alert Box Without Radius</h2>
  <!-- Red Color -->
  <div class="alert alert-error">
  Some dummy text here...
  </div>

  <!-- Greeb=n Color -->
  <div class="alert alert-success"> 
    Some dummy text here... 
  </div>

  <!-- Blue Color -->
  <div class="alert alert-info"> 
    Some dummy text here... 
  </div>

  <h2>Alert Box With Radius</h2>
  <!-- Red Color -->
  <div class="alert alert-error radius">
  Some dummy text here...
  </div>

  <!-- Greeb=n Color -->
  <div class="alert alert-success radius"> 
    Some dummy text here... 
  </div>

  <!-- Blue Color -->
  <div class="alert alert-info radius"> 
    Some dummy text here... 
  </div>
</div>


@import url(https://fonts.googleapis.com/css?family=Lato);
*{
  margin:0;
  padding: 0;
  box-sizing: border-box;
  
  max-width: 900px;
  margin: 1em auto 2em;
  font-family: Lato, Arial;
}
.wrap {
  padding-left: 1.4em;
  padding-right: 1.4em;
}
h1 {
  text-align: center;
  border: 2px solid #ddd;
  padding: 1em;
  margin-bottom: 1em;
  
}

h2 {
  border-bottom: 1px solid #ddd;
}

a {
  text-decoration: none;
  color: #2ecc71;
}
a:hover {
  color: #27ae60;
}


/* Alert Box CSS */

/* Base Alert Style */
.alert {
    position: relative;
    display: block;
    padding: 1em 1.8em;
    font-size: 0.9em;
    font-weight: 300;
    line-height: 1.2;
    text-align: left;
    margin-top: 0.4em;
    margin-bottom: 0.4em;
    background: transparent;
    color: white;
}

/* Error */ 
.alert-error { 
  background: #e74c3c; 
  border: 1px solid #c0392b; 
}

/* Success */ 
.alert-success { 
  background: #2ecc71; 
  border: 1px solid #27ae60; 
}

/* Info */ 
.alert-info { 
  background: #3498db; 
  border: 1px solid #2980b9; 
}

/* Radius */
.radius {
  border-radius: 3px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.