div.two{border:2px dashed #FF0000}
div.five:before {
content: "";
position: absolute;
border: 5px dashed #FF0000;
top: -3px;
bottom: -3px;
left: -3px;
right: -3px;
}
div.ten:before {
content: "";
position: absolute;
border: 10px dashed #FF0000;
top: -8px;
bottom: -8px;
left: -8px;
right: -8px;
}
div.odd:before {left:0;right:0;border-radius:60px}
div {
overflow: hidden;
position: relative;
text-align:center;
padding:10px;
margin-bottom:20px;
}
<div class="two">Kupo nuts here</div>
<div class="five">Kupo nuts<br/>here</div>
<div class="ten">Kupo<br/>nuts<br/>here</div>
<div class="ten odd">Kupo<br/>nuts<br/>here</div><!-- dashed border spacing -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Border Spacing</title>
<style>
div.two {
border: 2px dashed #ff0000;
}
div.five:before {
content: '';
position: absolute;
border: 5px dashed #ff0000;
top: -3px;
bottom: -3px;
left: -3px;
right: -3px;
}
div.ten:before {
content: '';
position: absolute;
border: 10px dashed #ff0000;
top: -8px;
bottom: -8px;
left: -8px;
right: -8px;
}
div.odd:before {
left: 0;
right: 0;
border-radius: 60px;
}
div {
overflow: hidden;
position: relative;
text-align: center;
padding: 10px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="two">Kupo nuts here</div>
<div class="five">Kupo nuts<br />here</div>
<div class="ten">Kupo<br />nuts<br />here</div>
<div class="ten odd">Kupo<br />nuts<br />here</div>
</body>
</html>