<style>
.main-multiple-borders{
width: 100%;
padding: 0 10vh;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.one {
width: 60px; height: 60px;
border-radius: 50%;
background: #fafafa;
margin: 105px 29px;
box-shadow: 0 0 0 10px #E8E2D6, 0 0 0 20px #E1D9C9,
0 0 0 30px #D9CFBB, 0 0 0 40px #D2C6AE,
0 0 0 50px #CABCA0, 0 0 0 60px #C3B393,
0 0 0 70px #BBA985, 0 0 0 80px #B4A078;
}
.two {
width: 200px; height: 120px;
background: #efebe9;
border: 5px solid #B4A078;
outline: #B4A078 dashed 1px;
outline-offset: -10px;
margin-bottom: 20px;
}
</style>
<template>
<div class="main-multiple-borders">
<div class="one"></div>
<div class="two"></div>
</div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34