<fieldset class=d1><legend>Wash Your Hands</legend></fieldset>
<fieldset class=d1><legend>Stay Apart</legend></fieldset>
<fieldset class=d1><legend>Wear A Mask</legend></fieldset>
<fieldset class=d1><legend>Stay Home</legend></fieldset>
<fieldset class=d2><legend>Wash Your Hands</legend></fieldset>
<fieldset class=d2><legend>Stay Apart</legend></fieldset>
<fieldset class=d2><legend>Wear A Mask</legend></fieldset>
<fieldset class=d2><legend>Stay Home</legend></fieldset>
body{
	display: grid; 
	margin: auto; 
	margin-top: calc(50vh - 170px); 
	width: 420px; 
	height: 200px; 
}
fieldset{
	border: 6px solid transparent; 
	border-top-color: black; 
	box-sizing: border-box; 
	grid-area: 1 / 1; 
	padding: 20px; 
	width: 200px; 
}

.d2{ grid-area: 1 / 2; }

fieldset:nth-of-type(2){ transform: rotate(90deg); }
fieldset:nth-of-type(3){ transform: rotate(180deg); }
fieldset:nth-of-type(4){ transform: rotate(-90deg); }
fieldset:nth-of-type(6){ transform: rotate(90deg); }
fieldset:nth-of-type(7){ transform: rotate(180deg); }
fieldset:nth-of-type(8){ transform: rotate(-90deg); }

legend{
	font: 9pt/0 'Averia Serif Libre';
	padding: 0 4px; 
}

.d1 legend{ margin-left: auto; }
.d2 legend{ margin-right: auto; }
fieldset:nth-of-type(3)>legend{ transform: rotate(180deg); } 
fieldset:nth-of-type(7)>legend{ transform: rotate(180deg); } 

body {
	user-select: none;
	-webkit-user-select: none;
}

External CSS

  1. https://fonts.googleapis.com/css2?family=Averia+Serif+Libre&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.