【コピペOK】おしゃれなボックスデザイン！ブログを彩るCSS囲み枠集

<div class="box1-1">
  <p>シンプルな実線で囲んだボックス。Cocoonでは「白抜きボックス」で作成できます。</p>
</div>

/* 実線 */
.box1-1 {
    margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
    padding: 2em;     /* 内側余白 */
    border: solid 2px #333; /* 線の種類・太さ・色 */
}

/* pタグの余白 */
.box1-1 p {
    margin: 0;
}

<div class="box1-2">
  <p>二重線で囲んだボックスです。色はお好みで変更してください。</p>
</div>

/* 二重線 */
.box1-2 {
    margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
    padding: 2em;        /* 内側余白 */
    border: double 7px #CCCFD6; /* 線の種類・太さ・色 */
}

/* pタグの余白 */
.box1-2 p {
    margin: 0;
}

<div class="box1-3">
  <p>破線で囲んだボックスです。色はお好みで変更してください。</p>
</div>

/* 破線 */
.box1-3 {
    margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
    padding: 2em;        /* 内側余白 */
    border: dashed 2px #b3ada4; /* 線の種類・太さ・色 */
}

/* pタグの余白 */
.box1-3 p {
    margin: 0;
}

<div class="box1-4">
  <p>点線（丸いドット）で囲むと少し可愛い雰囲気になります。</p>
</div>

/* 斜線（ドット） */
.box1-4 {
     margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
    padding: 2em;        /* 内側余白 */
    border:dotted 5px #CCA99D; /* 線の種類・太さ・色 */
}

/* pタグの余白 */
.box1-4 p {
    margin: 0;
}

<div class="box1-5">
  <p>シンプルに背景色をつけたボックスです。色はお好みで変更してください。</p>
</div>

/* 背景色をつける */
.box1-5 {
    margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
    padding: 2em;        /* 内側余白 */
    background-color:#E5F2F1; /* 背景の色 */
}

/* pタグの余白 */
.box1-5 p {
    margin: 0;
}

<div class="box1-6">
  <p>めくれた紙風のボックスです。色はお好みで変更してください。</p>
</div>

/* めくれた紙風 */
.box1-6 {
    margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
    padding: 2em;        /* 内側余白 */
    background-color: #f2f3f4; /* 背景色: 薄いグレーの背景色 */
    position: relative;      /* 相対位置指定: 擬似要素の位置を調整するため */
}

.box1-6:after {
    position: absolute;      /* 絶対位置指定: ボックスの右上に配置 */
    content: '';             /* 擬似要素にコンテンツを表示しない */
    right: 0px;              /* 右端に配置 */
    top: 0px;                /* 上端に配置 */
    border-width: 0 25px 25px 0; /* めくれた部分の形状を指定 */
    border-style: solid;     /* 線の種類: 実線 */
    border-color: #ccc #fff #ccc; /* 線の色: 上、右、下の順で指定 */
    box-shadow: -1px 1px 1px rgb(0 0 0 / .15); /* めくれた部分に影をつける */
}

/* pタグの余白 */
.box1-6 p {
    margin: 0;
}

<div class="box2-1">
  <p>背景色（ボーダー）をつけたボックスです。</p>
</div>

/* 背景色（ストライプ）をつける */
.box2-1 {
    margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
    padding: 2em;        /* 内側余白 */
    background-image: repeating-linear-gradient(-45deg, 
        #f2f3f7 0,                  /* ストライプの色（薄いグレー） */
        #f2f3f7 3px,                /* ストライプの太さ（3pxの間隔） */
        transparent 3px,            /* 透明部分 */
        transparent 6px);           /* 透明部分（3pxから6pxまで） */
}

/* pタグの余白 */
.box2-1 p {
    margin: 0;
}

<div class="box2-2">
  <p>ふせん風のボックスに影をつけています。</p>
</div>

/* ふせん風 */
.box2-2 {
    margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
    padding: 2em;        /* 内側余白 */
    border-left: solid 5px #e9b3a3;  /* 左側の線 */
    background-color: #F9F8F8;       /* 背景色 */
    box-shadow: 3px 1px 4px rgb(0 0 0 / .2); /* 影の効果: 右3px、下1px、ぼかし4px */
}

/* pタグの余白 */
.box2-2 p {
    margin: 0;
}

<div class="box2-3">
  <p>上にだけ太線をひいて影をつけています。</p>
</div>

/* 上にだけ太線 */
.box2-3 {
    margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
    padding: 2em;        /* 内側余白 */
    border-top: solid 5px #F7C16E;   /* 上辺に太い線 */
    background-color: #FDFBF6;       /* 背景色 */
    box-shadow: 3px 1px 4px rgb(0 0 0 / .2); /* 影の効果: 右3px、下1px、ぼかし4px */
}

/* pタグの余白 */
.box2-3 p {
    margin: 0;
}

<div class="box2-4">
  <p>上下に太線をひいています。</p>
</div>

/* 上下に太線 */
.box2-4 {
    margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
    padding: 2em;        /* 内側余白 */
    border-top: solid 5px #8FAAAD;  /* 上辺に太い線 */
    border-bottom: solid 5px #8FAAAD; /* 下辺に太い線 */
    background-color: #FBFBFB;       /* 背景色 */
}

/* pタグの余白 */
.box2-4 p {
    margin: 0;
}

<div class="box2-5">
  <p>左右に二重線をひいて影をつけています。</p>
</div>

/* 左右に二重線 */
.box2-5 {
    margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
    padding: 2em;        /* 内側余白 */
    border-left:double 5px #999fad;/*左の線の種類・太さ・色*/
    border-right:double 5px #999fad;/*右の線の種類・太さ・色*/
    background-color:#f1f3f4;/*背景色*/
    box-shadow:3px 1px 4px rgb(0 0 0 / .2);/*ボックス影*/
}

/* pタグの余白 */
.box2-5 p {
    margin: 0;
}

<div class="box2-6">
  <p>ボックスの上に少しずらしたボックスを配置しています。</p>
</div>

/* 少しずらしたボックス */
.box2-6 {
    margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
    padding: 2em;                 /* 内側余白 */
    background: none;             /* 元のボックス背景色なし */
    border: 1px solid #ccc;       /* 線の太さ（1px）、種類（実線）、色（#ccc） */
    position: relative;           /* 配置（基準となる位置） */
}

.box2-6:after {
    background-color: #eee;       /* ずらしたボックスの背景色 */
    border: none;                 /* 枠線なし */
    content: '';                  /* 擬似要素にコンテンツなし */
    position: absolute;           /* 配置（ここを動かす） */
    top: 7px;                     /* 上から7pxずらす */
    left: 7px;                    /* 左から7pxずらす */
    width: 100%;                  /* 幅100%（親要素に合わせる） */
    height: 100%;                 /* 高さ100%（親要素に合わせる） */
    z-index: -1;                  /* 背景として後ろに表示 */
}

/* pタグの余白 */
.box2-6 p {
    margin: 0;
}

<div class="box2-7">
  <p>線の色を一部だけ変えたボックスです。</p>
</div>

/* 一部だけ線の色を変える */
.box2-7 {
    margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
    padding: 2em;                 /* 内側余白 */
    border: 3px solid #eee;      /* 線の太さ（3px）、種類（実線）、色（#eee） */
    position: relative;           /* 配置（基準となる位置） */
    z-index: 0;                   /* 他の要素との重なり順（0は通常の順番） */
}

.box2-7:before {
    border-top: 3px solid #8293AA;  /* 上辺の線の色（#8293AA） */
    border-left: 3px solid #8293AA; /* 左辺の線の色（#8293AA） */
    content: '';                    /* 擬似要素にコンテンツなし */
    display: block;                 /* 擬似要素をブロック表示 */
    position: absolute;             /* 配置（親要素から絶対的に位置を指定） */
    top: -3px;                      /* 上から-3pxずらす */
    left: -3px;                     /* 左から-3pxずらす */
    width: 20px;                    /* 幅20px */
    height: 20px;                   /* 高さ20px */
    z-index: 1;                     /* 重なり順（前面に表示） */
}

/* pタグの余白 */
.box2-7 p {
    margin: 0;
}

<div class="box2-8">
  <p>方眼紙をイメージしたボックスです。オシャレな雰囲気。</p>
</div>

/* 方眼紙風 */
.box2-8 {
    margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
    padding: 2em;                    /* 内側余白 */
    background-image: linear-gradient(0deg, transparent 19px, #ccc 20px),  /* 横のグラデーション */
                      linear-gradient(90deg, transparent 19px, #ccc 20px); /* 縦のグラデーション */
    background-size: 20px 20px;      /* 方眼のサイズ（縦横20pxのグリッド） */
}

/* pタグの余白 */
.box2-8 p {
    margin: 0;
}

<div class="box2-9">
  <p>人気のワードプレス有料テーマ「SWELL」の目次をイメージしました。</p>
</div>

/* SWELL目次風 */
.box2-9 {
    --border-color-1: #fafafa;      /* 背景ストライプの色 */
    --border-color-2: #ddd;         /* 上下枠線の色 */
    margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
    padding: 2em;                    /* 内側余白 */
    background: linear-gradient(-45deg, 
                                transparent 25%, 
                                var(--border-color-1) 25%, 
                                var(--border-color-1) 50%, 
                                transparent 50%, 
                                transparent 75%, 
                                var(--border-color-1) 75%, 
                                var(--border-color-1));  /* ストライプ模様 */
    background-size: 4px 4px;        /* ストライプのサイズ */
    border-bottom: 4px double var(--border-color-2); /* 下枠線（太さ4px、色はvar(--border-color-2)） */
    border-top: 4px double var(--border-color-2);    /* 上枠線（太さ4px、色はvar(--border-color-2)） */
    background-clip: padding-box;    /* 背景をパディング領域まで表示 */
}

/* pタグの余白 */
.box2-9 p {
    margin: 0;
}

<div class="box2-10">
  <p>左上と右下にアクセントとして三角形をつけたボックスです。</p>
</div>

/* 左右に三角形をつける */
.box2-10 {
    margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
    padding: 2em;                    /* 内側余白 */
    position: relative;              /* 相対位置指定 */
}

.box2-10:before {
    border-bottom: 30px solid transparent; /* 上側に透明の三角形 */
    border-left: 30px solid #c6d4c6;       /* 左側の三角形（色は#c6d4c6） */
    content: '';                         /* 擬似要素にコンテンツなし */
    display: block;                      /* ブロック要素として表示 */
    position: absolute;                  /* 絶対位置指定 */
    top: 0px;                            /* 上から0px */
    left: 0px;                           /* 左から0px */
}

.box2-10:after {
    border-left: 30px solid transparent;  /* 右側に透明の三角形 */
    border-bottom: 30px solid #c6d4c6;    /* 下側の三角形（色は#c6d4c6） */
    content: '';                          /* 擬似要素にコンテンツなし */
    display: block;                       /* ブロック要素として表示 */
    position: absolute;                   /* 絶対位置指定 */
    bottom: 0px;                          /* 下から0px */
    right: 0px;                           /* 右から0px */
}

/* pタグの余白 */
.box2-10 p {
    margin: 0;
}

<div class="box3-1">
  <p>背景色をつけて角を丸くするだけでも可愛い雰囲気になります。border-radiusの値で丸みを調整します。</p>
</div>

/* 背景色をつけて角を丸くする */
.box3-1 {
    margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
    padding: 2em;     /* 内側余白 */
    border-radius:30px;/*丸みを調整*/
    background-color:#f9e8e2;
}

/* pタグの余白 */
.box3-1 p {
    margin: 0;
}

<div class="box3-2">
  <p>ふわふわと優しい雰囲気の囲み枠です。色はお好みで変更してください。</p>
</div>

/*ふわふわした囲み枠*/
.box3-2 {
    margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
    padding: 2em;     /* 内側余白 */
    background-color:#fff;/*背景色*/
    box-shadow: 0 0 6px 1px #faccbc, 0 0 6px 1px #faccbc inset;/*ふわりとした影*/
    border-radius: 30px;
}

/* pタグの余白 */
.box3-2 p {
    margin: 0;
}

<div class="box3-3">
  <p>茶系の糸で縫ったようなデザインです。柔らかい雰囲気に。</p>
</div>

/* 茶ステッチをつける ---------------------------------------------- */
.box3-3 {
    margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
    padding: 2em;                 /* 内側余白 */
    position: relative;           /* 相対位置指定 */
    z-index: 0;                   /* 他の要素との重なり順（通常の順番） */
    background-color: #f4f3f1;    /* 背景色: 薄いベージュ */
}

.box3-3:before {
    position: absolute;           /* 絶対位置指定 */
    border: 2px dashed #A7A297;   /* 破線の太さ（2px）と色（#A7A297） */
    content: '';                  /* 擬似要素にコンテンツなし */
    display: block;               /* ブロック要素として表示 */
    top: 0px;                     /* 上から0px */
    bottom: 0px;                  /* 下から0px */
    left: 0px;                    /* 左から0px */
    right: 0px;                   /* 右から0px */
    margin: 5px;                  /* 余白: 5px */
    z-index: -1;                  /* 背景として後ろに表示 */
    border-radius: 10px;          /* 角を丸める（10pxの半径） */
}

/* pタグの余白 */
.box3-3 p {
    margin: 0;
}

<div class="box3-4">
  <p>白ステッチにしても可愛いらしいデザインになります。</p>
</div>

/* 白ステッチをつける ---------------------------------------------- */
.box3-4 {
    margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
    padding: 2em;                 /* 内側余白 */
    position: relative;           /* 相対位置指定 */
    z-index: 0;                   /* 他の要素との重なり順（通常の順番） */
    background-color: #d6e0ea;    /* 背景色: 淡いブルーグレー */
}

.box3-4:before {
    position: absolute;           /* 絶対位置指定 */
    border: 2px dashed #fff;      /* 破線の太さ（2px）と色（白） */
    content: '';                  /* 擬似要素にコンテンツなし */
    display: block;               /* ブロック要素として表示 */
    top: 0px;                     /* 上から0px */
    bottom: 0px;                  /* 下から0px */
    left: 0px;                    /* 左から0px */
    right: 0px;                   /* 右から0px */
    margin: 5px;                  /* 余白: 5px */
    z-index: -1;                  /* 背景として後ろに表示 */
    border-radius: 3px;           /* 角を丸める（3pxの半径） */
}

/* pタグの余白 */
.box3-4 p {
    margin: 0;
}

<div class="box3-5">
  <p>手書き風の囲み枠です。色はお好みで変更してください。</p>
</div>

/* 手書き風 */
.box3-5 {
    margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
    padding: 2em;                   /* 内側余白 */
    border-radius: 30px 60px / 60px 30px;  /* 角をランダムに丸めて手書き風に */
    border: solid 8px #ccc7be;      /* 太めの枠線（8px、色: #ccc7be） */
}

/* pタグの余白 */
.box3-5 p {
    margin: 0;
}

<div class="box3-6">
  <p>ワンポイントに色をつけた可愛いらしいデザインになります。</p>
</div>

/* ワンポイント */
.box3-6 {
    margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
    padding: 2em;                   /* 内側余白 */
    position: relative;             /* 相対位置指定 */
    border: 8px solid #eee;         /* 枠線の太さ（8px）、種類（実線）、色（#eee） */
    z-index: 0;                     /* 重なり順を調整 */
}

.box3-6:before {
    background-color: #cca497;      /* ワンポイントの色（#cca497） */
    content: '';                     /* 擬似要素にコンテンツなし */
    display: block;                   /* ブロック要素として表示 */
    position: absolute;               /* 絶対位置指定 */
    top: -8px;                        /* 枠の外側（上）に配置 */
    left: -8px;                       /* 枠の外側（左）に配置 */
    width: 8px;                        /* ワンポイントのサイズ（幅） */
    height: 8px;                       /* ワンポイントのサイズ（高さ） */
    z-index: 1;                        /* ボックスより前面に表示 */
}

/* pタグの余白 */
.box3-6 p {
    margin: 0;
}

<div class="box3-7">
  <p>背景をチェックにして可愛い雰囲気に。薄い色がよいですね。</p>
</div>

/* 背景チェック */
.box3-7 {
    margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
    padding: 2em;                   /* 内側余白 */
    background-image: 
        linear-gradient(90deg, rgba(204, 204, 204, 0.1) 50%, transparent 50%), 
        linear-gradient(rgba(204, 204, 204, 0.2) 50%, transparent 50%); /* チェック模様 */
    background-size: 15px 15px;     /* チェックのサイズ */
}

/* pタグの余白 */
.box3-7 p {
    margin: 0;
}

<div class="box3-8">
  <p>背景を幅広のストライプにしても可愛い雰囲気になります。</p>
</div>

/* 背景ストライプ（ピンク系） */
.box3-8 {
    margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
    padding: 2em;                   /* 内側余白 */
    background: repeating-linear-gradient(
        -45deg,                     /* ストライプの角度 */
         #f8f8f8 0 6px,               /* 薄いグレー、幅6px */
        #fff 6px 12px                /* 白（#fff）、幅6px */
    );
}

/* pタグの余白 */
.box3-8 p {
    margin: 0;
}

<div class="box3-9">
  <p>手書きノート風のデザインです。</p>
</div>

/* 手書きノート風 */
.box3-9 {
    margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
    padding: 3em 2em 2em;          /* 内側余白（上・左右・下） */
    position: relative;            /* 相対位置指定 */
    background: #f4f3f2;           /* 背景色（ノート風の淡い色） */
}

.box3-9::before {
    position: absolute;            /* 絶対位置指定 */
    content: "";                   /* 擬似要素のコンテンツなし */
    width: 95%;                     /* ドット線の横幅 */
    top: 0.5em;                     /* 上からの位置 */
    left: 0;                        /* 左端 */
    right: 0;                       /* 右端 */
    bottom: 0;                      /* 下端 */
    margin: 0 auto;                 /* 水平方向中央揃え */
    border-top: dotted 10px #fff;   /* ドット線の形（dotted）、太さ（10px）、色（白） */
}

/* pタグの余白 */
.box3-9 p {
    margin: 0;
}

<div class="box5-1">
  <div class="box-title">ここにタイトルを入力</div>
  <div class="box-content">
    <p>タイトルが幅いっぱいに広がるボックスです。</p>
  </div>
</div>

/* タイトル付きボックス（見出し付きの枠） */
.box5-1 {
    margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
    border: 1px solid #8b9b9d; /* ボックスの枠線 */
}

.box5-1 .box-title {
    background-color: #8b9b9d; /* タイトル部分の背景色 */
    color: #fff; /* タイトルの文字色（白） */
    padding: .5em 1em; /* タイトル部分の内側余白 */
    text-align: center; /* タイトルを中央揃え */
    font-weight: bold; /* タイトルの太字 */
}

.box5-1 .box-content {
    padding: 2em; /* コンテンツ部分の内側余白 */
}

.box5-1 p {
    margin: 0; /* 段落の外側余白をゼロに設定 */
}

<div class="box5-2">
  <div class="box-title">ここにタイトルを入力</div>
  <div class="box-content">
    <p>Cocoonの「ラベルボックス」のようなタイトル付きのボックスです。</p>
  </div>
</div>

/* タイトル付き（ラベルボックス） */
.box5-2 {
    margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
    border: 2px solid #CCA99D; /* ボックスの線 (太さ・種類・色) */
}

.box5-2 .box-title {
    background-color: #fff;         /* タイトル背景色 */
    color: #CCA99D;               /* タイトル文字色 */
    padding: 0 .5em;          /* タイトルの余白 */
    font-weight: bold; /* タイトルの太字 */
    line-height: 1;             /* タイトルの行の高さ */
    margin-top: -.5em;          /* 上からの距離 (ボックスから浮かせる) */
    margin-left: 1em;           /* 左からの距離 */
    width: fit-content;         /* タイトル幅を内容に合わせる */
}

.box5-2 .box-content {
    padding: 2em;               /* コンテンツ内の余白 */
}

.box5-2 p {
    margin: 0;
}

<div class="box5-3">
  <div class="box-title">ここにタイトルを入力</div>
  <div class="box-content">
    <p>左上にタイトル付きが表示されるボックスです。</p>
  </div>
</div>

/* 左上にタイトル（背景色付き） */
.box5-3 {
    margin: 0 auto 2em; /* 外側余白（上下と中央配置） */
    border: 1px solid #757575; /* 枠線 */
}

.box5-3 .box-title {
    background-color: #757575; /* タイトル背景色 */
    color: #fff; /* 文字色 */
    padding: 0 1em; /* 内側余白 */
    display: inline-block; /* タイトル幅を内容に合わせる */
}

.box5-3 .box-content {
    padding: 2em; /* 内側の余白 */
}

.box5-3 p {
    margin: 0; /* 余白なし */
}

<div class="box5-4">
  <div class="box-title">ここにタイトルを入力</div>
  <div class="box-content"> 
    <p>左上にずらした背景色ありタイトルのボックスです。</p>
  </div>
</div>

/* 左上にずらした背景色ありタイトル */
.box5-4 {
    margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
    border: 1px solid #CCA99D; /* ボックスの線 (太さ・種類・色) */
}

.box5-4 .box-title {
    background-color: #CCA99D; /* タイトル背景色 */
    font-size: 1em;            /* タイトル文字の大きさ */
    color: #fff;               /* タイトル文字色 */
    padding: .3em .5em;   /* タイトルの余白 */
    line-height: 1;       /* タイトルの行の高さ */
    margin-top: -.8em;    /* 上からの距離 (ボックスから浮かせる) */
    margin-left: 1em;     /* 左からの距離 */
    width: fit-content;   /* タイトル幅を内容に合わせる */
}

.box5-4 .box-content {
    padding: 2em; /* コンテンツ内の余白 */
}

/* pタグの余白 */
.box5-4 p {
    margin: 0;
}

<div class="box5-6">
  <div class="box-title">ここにタイトルを入力</div>
  <div class="box-content"> 
    <p>セロテープを貼り付けたようなデザインのボックスです。</p>
  </div>
</div>

/*セロテープ風*/
.box5-6 {
    margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
    background-color: #E6ECF2; /* ボックス背景色 */
    border: 1px solid transparent;
}

.box5-6 .box-title {
    background-color: rgb(255 255 255 / .1); /* テープ背景色と透過 */
    border-left: 2px dotted rgb(0 0 0 / .1); /* テープのギザギザ左 */
    border-right: 2px dotted rgb(0 0 0 / .1); /* テープのギザギザ右 */
    box-shadow: 0 0 5px rgb(0 0 0 / .12); /* テープ影 */
    transform: rotate(-2deg); /* テープの傾き */
    font-size: 1em; /* タイトル文字の大きさ */
    color: #666; /* タイトル文字色 */
    padding: 10px 20px; /* タイトルの余白 */
    line-height: 1; /* タイトルの行の高さ */
    margin-top: -1em; /* 上からの距離 (ボックスから浮かせる) */
    margin-left: 1em; /* 左からの距離 */
    width: fit-content; /* タイトル幅を内容に合わせる */
}

.box5-6 .box-content {
    padding: 2em; /* コンテンツ内の余白 */
}

/* pタグの余白 */
.box5-6 p {
    margin: 0;
}

<div class="box6-1">
<div class="box-title">MEMO</div>
    <p>メモボックスです。ここにコンテンツを入力します。</p>
</div>

/* メモアイコンをつけた囲み枠 */

/* メモボックス全体のスタイル */
.box6-1 {
    margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
    padding: 1em 2em 1.5em; /* 上下・左右の余白 */
    background-color: #E8EAF0; /* 背景色 */
    border-radius: 1px; /* ボックスの角の丸み */
}

/* メモボックスのタイトル部分 */
.box6-1 .box-title {
    color: #b4bbce; /* タイトル文字の色 */
    font-size: 1.1em; /* タイトル文字の大きさ */
    font-weight: bold; /* 太字 */
}

/* タイトル部分のアイコン */
.box6-1 .box-title::before {
    font-family: "Font Awesome 5 Free"; /* アイコンのフォント */
    content: "\f304"; /* メモアイコンのUnicode */
    margin-right: 5px; /* アイコンと文字の間隔 */
}

/* pタグのmarginを0にする */
.box6-1 p {
    margin: 0;
}

<div class="box6-2">
<div class="box-title">タイトルを入力</div>
    <p>びっくりマークのボックスです。ここにコンテンツを入力します。</p>
</div>

/* ビックリマークのアイコンをつけた囲み枠 */
.box6-2 {
    margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
    padding: 1em 2em 1.5em; /* 上下・左右の余白 */
    background-color: #EFE3DF; /* 背景色 */
    border-radius: 1px; /* ボックスの角の丸み */
}

/* ボックスのタイトル部分 */
.box6-2 .box-title {
    color: #AA8276; /* タイトル文字の色 */
    font-size: 1.1em; /* タイトル文字の大きさ */
    font-weight: bold; /* 太字 */
}

/* タイトル部分のアイコン */
.box6-2 .box-title::before {
    font-family: "Font Awesome 5 Free"; /* アイコンのフォント */
    content: "\f06a"; /* ビックリマークアイコンのUnicode */
    margin-right: 5px; /* アイコンと文字の間隔 */
}

/* pタグの余白 */
.box6-2 p {
    margin: 0;
}

<div class="box6-3">
<div class="box-title">タイトルを入力</div>
    <p>はてなマークのボックスです。ここにコンテンツを入力します。</p>
</div>

/* はてなマークのアイコンをつけた囲み枠 */
.box6-3 {
    margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
    padding: 1em 2em 1.5em; /* 上下・左右の余白 */
    background-color: #e7f1f2; /* 背景色 */
    border-radius: 1px; /* ボックスの角の丸み */
}

/* ボックスのタイトル部分 */
.box6-3 .box-title {
    color: #96a3a3; /* タイトル文字の色 */
    font-size: 1.1em; /* タイトル文字の大きさ */
    font-weight: bold; /* 太字 */
}

/* タイトル部分のアイコン */
.box6-3 .box-title::before {
    font-family: "Font Awesome 5 Free"; /* アイコンのフォント */
    content: "\f059"; /* はてなマークアイコンのUnicode */
    margin-right: 5px; /* アイコンと文字の間隔 */
}

/* pタグの余白 */
.box6-3 p {
    margin: 0;
}

<div class="box6-4">
<div class="box-title">Check</div>
    <p>チェックマークのボックスです。ここにコンテンツを入力します。</p>
</div>

/* チェックマークのアイコンをつけた囲み枠 */
.box6-4 {
    margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
    padding: 1em 2em 1.5em; /* 上下・左右の余白 */
    background-color: #fff4cc; /* 背景色 */
    border-radius: 1px; /* ボックスの角の丸み */
}

/* ボックスのタイトル部分 */
.box6-4 .box-title {
    color: #FFBD59; /* タイトル文字の色 */
    font-size: 1.1em; /* タイトル文字の大きさ */
    font-weight: bold; /* 太字 */
}

/* タイトル部分のアイコン */
.box6-4 .box-title::before {
    font-family: "Font Awesome 5 Free"; /* アイコンのフォント */
    content: "\f00c"; /* チェックマークアイコンのUnicode */
    margin-right: 5px; /* アイコンと文字の間隔 */
}

/* pタグの余白 */
.box6-4 p {
    margin: 0;
}