Text in a border

index.html

<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">

<div class='box'>
  <img src='https://source.unsplash.com/-XvFzO6lmb0/600x600'>
  
  <div class='text'>
    <div>
      <span class='innertext'>Text goes here</span>
    </div>
  </div>
</div>

style.scss

$pad: 40px;
$space: 0px;
$stroke: 4px;

html {
  background: #ddd;
}

.box {
  width: 400px;
  background: #123;
  margin: 48px auto;
  padding: 16px;
  position: relative;
}

.box > img {
  width: 400px;
  height: 300px;
  opacity: .5;
  object-fit: cover;
}

.box::after {
  content: '';
  display: block;
  position: absolute;
  top: $pad;
  right: $pad;
  left: $pad;
  bottom: $pad - $space + 7px;
  border: solid $stroke white;
  border-bottom: 0;
}

.text {
  color: white; 
  position: absolute;
  text-align: center;
  bottom: $pad - $space;
  left: $pad;
  right: $pad;
  white-space: nowrap;
  overflow: hidden;
  font-family: 'fjalla one', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.text > div {
  width: 2000px;
  margin-left: -1 * (2000px - (400px - $pad)) / 2;
}

.innertext::before,
.innertext::after {
  content: '';
  display: inline-block;
  width: 600px;
  height: $stroke;
  background: white;
  vertical-align: middle;
}
  
.innertext::before {
  margin-right: 16px;
}

.innertext::after {
  margin-left: 16px;
}

text-in-a-border.markdown

Text in a border

A Pen by Rico Sta. Cruz on CodePen.

License.