Как сделать рамку в CSS вокруг блока

Последнее обновление на 29.01.2023

В качестве примера приведем код на CSS html создание двойной рамки вокруг блока div и пример как создать несколько рамок с помощью свойства box-shadow

.ramka {
display: block;
width: 100px;
height: 100px;
background-color:rgb(199, 228, 146);
border-radius: 10px;
border: 10px solid #a46eeb;
outline: 10px solid #3e8d4f;
margin-left: 20px;
}
.multy-ramka {
display: block;
width: 100px;
height: 100px; 
background-color:rgb(192, 157, 233);
border-radius: 10px;
margin-top: 30px;
margin-left: 20px;
border: 7px solid rgb(255, 181, 62);
box-shadow:
0 0 0 7px red,
0 0 0 12px green,
0 0 0 17px blue;
}

<div class="ramka"></div>
<div class="multy-ramka"></div>

Вывод на экран двойной закругленной рамки и несколько рамок