Как добавить рамку вокруг виджета в Blogger

Question

Я ищу трюк, чтобы создать эту границу вокруг виджета, как показано на рисунке:

И название должны придерживаться Вверх.

Любая идея, как это сделать?

Заранее спасибо :)

Answer 1

Вы можете использовать, как это -

body{ 
 
    background: #ccc; 
 
} 
 
.border-col{ 
 
    min-height: 300px;width: 220px; 
 
    background: #ccc;border:2px solid #fff; 
 
    margin: 10px auto 0; 
 
    position: relative; 
 
} 
 
.border-col h2{ 
 
    background: #ccc; 
 
    font-size: 15px; 
 
    left: 0; 
 
    margin: auto; 
 
    padding: 3px; 
 
    position: absolute; 
 
    right: 0; 
 
    top: -13px; 
 
    width: 60px; 
 
}

<div class="border-col"> 
 
    <h2>Heading</h2> 
 
    </div>