Скругленная рамка (скруглы) для блока на CSS

08/07/2016  CSS, html, верстка, веб-разработка

Скругленная внутрь рамка придает блоку некую изящность.

Ширину блока, цвет заливки и рамки, глубину и радиус скруглов можно установить по вкусу.

 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus
 

Скругл — 1-й вариант

Автор этого скругла неизвестен, решение найдено в сети и заточено под нужды сайта салона красоты в блоке с акциями. В основе — абсолютное позиционирование, отрицательные значения, псевдоэлементы (after и before) и свойство border-radius.

Стили


.corners {
color: #000;
margin: 0;
overflow: hidden;
position: relative;
}
.text {
background: #fff;
border: 2px solid #9b9b9b;
padding: 1em;
}
.arc-top,
.arc-bottom {
position: absolute;
width: 100%;
height: 12px;
left: 0;
}
.arc-top { top: 0 }
.arc-bottom { bottom: 0 }
.arc-top:before,
.arc-top:after,
.arc-bottom:before,
.arc-bottom:after {
content: '';
position: absolute;
width: 24px;
height: 24px;
background-color: #fff;
border: 2px solid #9b9b9b;
border-radius: 50%;
}
.arc-top:before {
top: -12px;
left: -12px;
}
.arc-top:after {
top: -12px;
right: -12px;
}
.arc-bottom:before {
bottom: -12px;
left: -12px;
}
.arc-bottom:after {
bottom: -12px;
right: -12px;
}

HTML


<div class="corners">
<div class="arc-top"></div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a title="#" href="#">Aenean commodo</a> ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<div class="arc-bottom"></div>
</div>

Скругл — 2-й вариант

Реализация скруглов с использованием radial-gradient. Автор — Дмитрий Григоров.

Стили


.corners {
 background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left, radial-gradient(circle at top right, transparent 15px, #58a 0) top right, radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right, radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;
 background-size: 50% 50%;
 background-repeat: no-repeat;
 padding: 1em;
}

HTML


<div class="corners">
 Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране
</div>

 

Скачать примеры (архив)

Михаил Апсолямов
Михаил Апсолямов Создаю сайты. Оказываю услуги seo-продвижения. Провожу аудиты сайтов. Пишу статьи на заказ. Услуги и цены.

 

наверх