HTML Code For Box With Colour Border

Step 1 : Add To CSS
div {
  margin-bottom: 15px;
  padding: 4px 12px;


}
.noteboxred {
  background-color: #ffdddd;
  border: 1px solid #f44336;
  padding: 14px 22px;
  border-radius: 6px;
}

.noteboxgreen {
  background-color: #ddffdd;
  border: 2px solid #4CAF50;
  padding: 14px 22px;
  border-radius: 6px;
}

.noteboxblue {
  background-color: #e7f3fe;
  border: 2px solid #2196F3;
  padding: 14px 22px;
  border-radius: 6px;
}


.noteboxyellow {
  background-color: #ffffcc;
  border: 2px solid #ffeb3b;
  padding: 14px 22px;
  border-radius: 6px;
}
Step 2 : Add To HTML
<div class="noteboxred">
  <p><strong>noteboxred</strong> div class="noteboxred"...</p>
</div>

<div class="noteboxgreen">
  <p><strong>noteboxgreen</strong> div class="noteboxgreen"...</p>
</div>

<div class="noteboxblue">
  <p><strong>noteboxblue</strong> div class="noteboxblue"...</p>
</div>

<div class="noteboxyellow">
  <p><strong>noteboxyellow</strong> div class="noteboxyellow"...</p>
</div>

After Publish It Will Look Like Below

noteboxred div class="noteboxred"...
noteboxgreen div class="noteboxgreen"...
noteboxblue div class="noteboxblue"...
noteboxyellow div class="noteboxyellow"...

Labels

Show more