●枠

<div class="box1">
<p>ここに文章</p>
</div>

.box1 {
padding: 0.5em 1em;
margin: 2em 0;
font-weight: bold;
border: solid 3px #000000;
}
.box1 p {
margin: 0;
padding: 0;
}

<div class="box2">
<p>ここに文章</p>
</div>

.box2 {
padding: 0.5em 1em;
margin: 2em 0;
font-weight: normal;
color: black;/*文字色*/
background: #FFF;
border: solid 2px #db7093;/*線*/
border-radius: 10px;/*角の丸み*/
}
.box2 p {
margin: 0;
padding: 0;
}

<div class="box3">
<p>ここに文章</p>
</div>

.box3 {
padding: 0.5em 1em;
margin: 2em 0;
color: #2c2c2f;
background: papayawhip;/*背景色*/
}
.box3 p {
margin: 0;
padding: 0;
}

<div class="box5">
<p>ここに文章</p>
</div>

.box5 {
padding: 0.5em 1em;
margin: 2em 0;
color: black; /* 文字色 */
background-color: ghostwhite; /* 背景色 */
border: 1px solid #ccc; /* 枠線 */
}
.box5 p {
margin: 0;
padding: 0;
}

<div class="box8">
<p>ここに文章</p>
</div>

.box8 {
padding: 0.5em 1em;
margin: 2em 0;
color: #232323;
background: #fff8e8;
border-left: solid 10px #ffc06e;
}
.box8 p {
margin: 0;
padding: 0;
}

<div class="box11">
<p>ここに文章</p>
</div>

ここにタイトル

<div class="box29">
<div class="box-title">ここにタイトル</div>
<p>ここに文章</p>
</div>

.box29 {
margin: 2em 0;
background: #fff8e8;
}
.box29 .box-title {
font-size: 1.2em;
background: #ffc06e;
padding: 4px;
text-align: center;
color: #FFF;
font-weight: bold;
letter-spacing: 0.05em;
}
.box29 p {
padding: 15px 20px;
margin: 0;
}

ここにタイトル

<div class="box30">
<div class="box-title">ここにタイトル</div>
<p>ここに文章</p>
</div>

.box30 {
margin: 2em 0;
background: #fff9f9;
}
.box30 .box-title {
font-size: 1.2em;
background: #ffc06e;
padding: 4px;
text-align: center;
color: #FFF;
font-weight: bold;
letter-spacing: 0.05em;
}
.box30 p {
padding: 15px 20px;
margin: 0;
}