1div.two{border:2px dashed #FF0000}
2
3div.five:before {
4 content: "";
5 position: absolute;
6 border: 5px dashed #FF0000;
7 top: -3px;
8 bottom: -3px;
9 left: -3px;
10 right: -3px;
11}
12
13div.ten:before {
14 content: "";
15 position: absolute;
16 border: 10px dashed #FF0000;
17 top: -8px;
18 bottom: -8px;
19 left: -8px;
20 right: -8px;
21}
22
23div.odd:before {left:0;right:0;border-radius:60px}
24
25div {
26 overflow: hidden;
27 position: relative;
28
29
30 text-align:center;
31 padding:10px;
32 margin-bottom:20px;
33}
34
35<div class="two">Kupo nuts here</div>
36<div class="five">Kupo nuts<br/>here</div>
37<div class="ten">Kupo<br/>nuts<br/>here</div>
38<div class="ten odd">Kupo<br/>nuts<br/>here</div>
1.block {
2 width: 100px;
3 height: 100px;
4 /* dashed border */
5 background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23333' stroke-width='4' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
6}