Как сделать такой border?

Question

[Ruslan Danilov]

Здравствуйте! Подскажите пожалуйста, как можно сделать такую рамку?

Comments

[Роман]

Не знаю как правильно, но я это делаю так:

<fieldset class="field_1">
<legend>
   <h1> Верхний текст </h1>
</legend>
   <p> Содержимое блока </p>
</fieldset>
<fieldset class="field_2">
<legend>
   <a href="#"> Кнопка </a>
</legend>
</fieldset>

body {
backround-color: #ccc;
font-family: Arial;
}
fieldset {
width: 40%;
margin: 0 auto;
border 2px solid #fff;
border-bottom: none;
text-align: center;
}
.field_2 {
transform: rotateX(180deg);
}
.field_2 legend {
transform: rotateX(180deg);

Answer 1

[RAX7]

Comments

[Ruslan Danilov]

Спасибо! Круто!)

Answer 2

[houd1ini]

https://livedemo00.template-help.com/wt_prod-3852/... - можете посмотреть здесь на второй секции, псевдоэлемент с градиентным бэкграундом

Comments

[Ruslan Danilov]

Спасибо!