JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<div id="braced-corners">
  <p>Nowhere is this axiom of design more readily apparent than on board the world famous battlestar Galactica. This ship, the last of her kind still in service, was constructed over fifty years ago during the early days of the Cylon War. Originally, there were twelve battlestars, each representing one of Kobol's twelve colonies.</p>
</div>

<div id="clipped-corners">
  <p>You'll see things here that look odd, even antiquated to modern eyes. Phones with cords, awkward manual valves, computers that barely deserve the name. But all of it is intentional. It's all designed to operate in combat
against an enemy who could infiltrate and disrupt all but the most basic computer systems.
</div>

CSS

body {
  background: #003;
  color: #fff;
  font-family: Droid Sans Mono;
  line-height: 1.5;
  display: flex;
}

div {
  margin: 2rem;
  padding: 0 2% 0 2%;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/grid.svg);
  background-size: 3%;
}

#braced-corners {
  -o-border-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/brace.svg) 50 50;
     border-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/brace.svg) 50 50;
  background-color: rgba(255, 255, 255, 0.3);
  border-style: inset;
  border-width: 30px;
  transition: 0.8s;
}

#braced-corners:hover {
  -o-border-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/brace.svg) 25 25;
     border-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/brace.svg) 25 25;
  background-size: 2%;
}

#clipped-corners {
  -o-border-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/clipped-corner.svg) 50 50 repeat repeat;
     border-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/clipped-corner.svg) 50 50 repeat repeat;
  border-style: outset;
  border-width: 25px;
  box-shadow: inset rgba(255, 255, 255, 0.3) 0 0 0 250px;
  transition: 0.6s;
}

#clipped-corners:hover {
  background-size: 2%;
}