<h2 class="title1">Title1 with bottom line</h2>

<h2 class="title2">Title2 with bottom dotted line</h2>

<h2 class="title3">Title3 with bottom double line</h2>

<h2 class="title4">Title4 with double line border</h2>
.title1 {
  border-bottom: 3px solid #000;

.title2 {
  border-bottom: 3px dotted #000;

.title3 {
  border-bottom: 6px double #000;

.title4 {
  position: relative;
  padding: 1rem 2rem;
  border: 4px solid #000;

.title4:before {
  position: absolute;
  top: 4px;
  left: 4px;
  content: '';
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  border: 2px solid #f00;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.