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

<div class="cstm-box-solid">
  <p>単一の線で囲んだミニマルデザイン</p>
</div>

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

/* pタグの余白 */
.cstm-box-solid p { margin:0; }

<div class="cstm-box-double">
  <p> 二重線でモダンな印象</p>
</div>

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

/* pタグの余白 */
.cstm-box-solid p { margin:0; }

<div class="cstm-box-dashed">
  <p>破線で軽い印象</p>
</div>

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

/* pタグの余白 */
.cstm-box-dashed p { margin:0; }

<div class="cstm-box-dotted">
  <p>ドット状の点線で遊び心を</p>
</div>

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

/* pタグの余白 */
.cstm-box-dotted p { margin:0; }

<div class="cstm-box-bg">
  <p>単色背景でシンプルに強調</p>
</div>

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

/* pタグの余白 */
.cstm-box-bg p { margin:0; }

<div class="cstm-box-paper">
  <p>紙の角がめくれたような影付きデザイン</p>
</div>

/* めくれた紙風 */
.cstm-box-paper {
   margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
   padding: 2em; /* 内側余白 */
   background-color: #f2f3f4; /* 背景色（薄いグレー） */
   position: relative; /* 相対位置指定 */
}

.cstm-box-paper::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タグの余白 */
.cstm-box-paper p { margin:0; }

<div class="cstm-box-stripe">
  <p>斜めストライプ背景で洗練された印象</p>
</div>

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

/* pタグの余白 */
.cstm-box-stripe p { margin:0; }

<div class="cstm-box-sticky">
  <p>付箋のような柔らかいデザイン</p>
</div>

/* ふせん風 */
.cstm-box-sticky {
   margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
   padding: 2em;   /* 内側余白 */
   border-left: solid 5px #e9b3a3;  /* 左側の線 */
   background-color: #F9F8F8;   /* 背景色 */
}

/* pタグの余白 */
.cstm-box-sticky p { margin:0; }

<div class="cstm-box-topline">
  <p>上部に太い線で強調</p>
</div>

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

/* pタグの余白 */
.cstm-box-topline p { margin:0; }

<div class="cstm-box-topbottom">
  <p>上下に太い線で安定感</p>
</div>

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

/* pタグの余白 */
.cstm-box-topbottom p { margin:0; }

<div class="cstm-box-sides-double">
  <p>左右に二重線で個性的に</p>
</div>

/* 左右に二重線 */
.cstm-box-sides-double {
   margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
   padding: 2em;   /* 内側余白 */
   border-left:double 5px #999fad; /*左の線の種類・太さ・色 */
   border-right:double 5px #999fad; /*右の線の種類・太さ・色 */
   background-color:#f1f3f4; /* 背景色 */
}

/* pタグの余白 */
.cstm-box-sides-double p { margin:0; }

<div class="cstm-box-offset">
  <p>オフセットで奥行きを演出</p>
</div>

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

.cstm-box-offset: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タグの余白 */
.cstm-box-offset p { margin:0; }

<div class="cstm-box-corner-accent">
  <p>線の一部に色を追加</p>
</div>

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

.cstm-box-corner-accent: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タグの余白 */
.cstm-box-corner-accent p { margin:0; }

<div class="cstm-box-grid">
  <p>グリッド背景でレトロ感</p>
</div>

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

/* pタグの余白 */
.cstm-box-grid p { margin:0; }

<div class="cstm-box-swell">
  <p>SWELLテーマの目次風デザイン</p>
</div>

/* SWELL目次風 */
.cstm-box-swell {
   --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タグの余白 */
.cstm-box-swell p { margin:0; }

<div class="cstm-box-corner-tri">
  <p>左右に三角形のアクセント</p>
</div>

/* 左右に三角形の装飾ボックス */
.cstm-box-corner-tri {
   margin: 0 auto 2em;   /* 外側余白（下に余白をつける） */
   padding: 2em;         /* 内側の余白 */
   position: relative;   /* 疑似要素の基準にする */
}

/* 左上の三角形 */
.cstm-box-corner-tri:before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   display: block;
   border-bottom: 30px solid transparent; /* 下方向は透明 */
   border-left: 30px solid #555;          /* 左側に色付き三角形 */
}

/* 右下の三角形 */
.cstm-box-corner-tri:after {
   content: '';
   position: absolute;
   bottom: 0;
   right: 0;
   display: block;
   border-left: 30px solid transparent;   /* 左方向は透明 */
   border-bottom: 30px solid #555;        /* 下側に色付き三角形 */
}

/* 内側の段落余白をリセット */
.cstm-box-corner-tri p {
   margin: 0;
}

<div class="cstm-box-rounded-bg">
  <p>丸角と背景色で柔らかく</p>
</div>

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

/* pタグの余白 */
.cstm-box-rounded-bg p { margin:0; }

<div class="cstm-box-fluffy">
  <p>雲のような柔らかい枠</p>
</div>

/*ふわふわした囲み枠*/
.cstm-box-fluffy {
   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タグの余白 */
.cstm-box-fluffy p { margin:0; }

<div class="cstm-box-stitch-brown">
  <p>茶色の縫い目風デザイン</p>
</div>

/* 茶ステッチをつける */
.cstm-box-stitch-brown {
   margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
   padding: 2em; /* 内側余白 */
   position: relative;
   z-index: 0;
   background-color: #f4f3f1; /* 薄いベージュ */
}

.cstm-box-stitch-brown::before {
   content: '';
   position: absolute;
   inset: 0; /* top, right, bottom, left を一括指定 */
   margin: 5px;
   border: 1px dashed #A7A297;
   border-radius: 10px;
   z-index: -1;
   display: block;
}

/* pタグの余白 */
.cstm-box-stitch-brown p { margin:0; }

<div class="cstm-box-stitch-white">
  <p>白い縫い目で清潔感</p>
</div>

/* 白ステッチをつける */
.cstm-box-stitch-white {
   margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
   padding: 2em; /* 内側余白 */
   position: relative;
   z-index: 0;
   background-color: #d6e0ea; /* 淡いブルーグレー */
}

.cstm-box-stitch-white::before {
   content: '';
   position: absolute;
   inset: 0; /* top, right, bottom, left を一括指定 */
   margin: 5px;
   border: 2px dashed #fff;
   border-radius: 3px;
   z-index: -1;
   display: block;
}

/* pタグの余白 */
.cstm-box-stitch-white p { margin:0; }

<div class="cstm-box-handdrawn">
  <p>手書きラインで親しみやすく</p>
</div>

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

/* pタグの余白 */
.cstm-box-handdrawn p { margin:0; }

<div class="cstm-box-pin">
  <p>小さな装飾付き</p>
</div>

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

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

/* pタグの余白 */
.cstm-box-pin p { margin:0; }

<div class="cstm-box-checkered">
  <p>チェック柄背景で可愛く</p>
</div>

/* 背景チェック */
.cstm-box-checkered {
   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タグの余白 */
.cstm-box-checkered p { margin:0; }

<div class="cstm-box-stripe-wide">
  <p>太めのストライプで華やかに</p>
</div>

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

/* pタグの余白 */
.cstm-box-stripe-wide p { margin:0; }

<div class="cstm-box-notebook">
  <p>ノートのようなカジュアルデザイン</p>
</div>

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

.cstm-box-notebook::before {
   content: '';
   position: absolute;
   inset: 0.5em 0 0 0; /* 上から0.5em、左右と下を0に */
   margin: 0 auto; /* 水平方向中央揃え */
   width: 95%; /* ドット線の横幅 */
   border-top: dotted 10px #fff; /* ドット線（太さ10px、白） */
   pointer-events: none; /* クリックを透過 */
}

/* pタグの余白 */
.cstm-box-notebook p { margin:0; }

<div class="cstm-box-titled">
  <div class="box-title">ここにタイトルを入力</div>
  <div class="box-content">
   <p>上部にタイトルを配置</p>
  </div>
</div>

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

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

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

.cstm-box-titled p { margin:0; }

<div class="cstm-box-label">
  <div class="box-title">ここにタイトルを入力</div>
  <div class="box-content">
   <p>ラベル風のタイトルデザイン</p>
  </div>
</div>

/* タイトル付き（ラベルボックス） */
.cstm-box-label {
   position: relative; /* タイトルの配置調整のために基準を設定 */
   margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
   border: 2px solid #CCA99D; /* ボックスの線 (太さ・種類・色) */
}

.cstm-box-label .box-title {
   position: absolute; /* タイトルをボックス内で絶対位置指定 */
   top: -0.5em; /* 上方向に少し移動 */
   left: 1em; /* 左端からの距離 */
   background-color: #fff; /* タイトル背景色 */
   color: #CCA99D; /* タイトルの文字色 */
   padding: 0 .5em; /* タイトルの内側余白 */
   font-weight: bold; /* タイトルのフォントを太字に */
   line-height: 1; /* タイトルの行の高さ */
   display: inline-block; /* タイトルの幅を内容に合わせる */
   width: auto; /* タイトル幅を内容に応じて可変にする */
   max-width: calc(100% - 2em); /* 左右の余白を考慮して最大幅を調整 */
   white-space: nowrap; /* タイトルを1行に固定 */
   overflow: hidden; /* はみ出した部分を非表示 */
   text-overflow: ellipsis; /* 省略記号（...）を表示 */
}

.cstm-box-label .box-content {
   padding: 2em; /* ボックス内コンテンツの余白を設定 */
}

.cstm-box-label p { margin:0; }

<div class="cstm-box-title-topleft">
  <div class="box-title">ここにタイトルを入力</div>
  <div class="box-content">
   <p>左上に背景色付きタイトル</p>
  </div>
</div>

/* 左上にタイトル（背景色付き） */
.cstm-box-title-topleft {
   position: relative; /* タイトルをボックス内の左上に配置するための基準 */
   margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
   border: 1px solid #757575; /* 枠線の設定 */
}

.cstm-box-title-topleft .box-title {
   background-color: #757575; /* タイトルの背景色 */
   color: #fff; /* タイトルの文字色（白） */
   padding: 0.1em 1em; /* タイトルの内側余白（上下・左右） */
   position: absolute; /* 親要素（.cstm-box-title-topleft）の左上に固定 */
   top: 0; /* 上端に配置 */
   left: 0; /* 左端に配置 */
   display: inline-block; /* タイトルの幅を内容に合わせる */
   font-size: 0.9em; /* タイトルのフォントサイズ */
   width: auto; /* タイトル幅を内容に応じて可変にする */
   max-width: calc(100% - 2em); /* 左右の余白を考慮して最大幅を調整 */
   white-space: nowrap; /* タイトルを1行に固定 */
   overflow: hidden; /* はみ出した部分を非表示 */
   text-overflow: ellipsis; /* 省略記号（...）を表示 */
}

.cstm-box-title-topleft .box-content {
   padding: 3em 2em 2em; /* 上部の余白を多めに確保し、タイトルと本文が重ならないようにする */
}

.cstm-box-title-topleft p { margin:0; }

<div class="cstm-box-title-float">
  <div class="box-title">ここにタイトルを入力</div>
  <div class="box-content"> 
   <p>左上にオフセットしたタイトル</p>
  </div>
</div>

/* 左上にずらした背景色ありタイトル */
.cstm-box-title-float {
   position: relative; /* タイトルをボックス内の左上に配置するための基準 */
   margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
   border: 1px solid #CCA99D; /* 枠線の色を設定 */
   border-radius: 5px; /* 角を少し丸めて柔らかい印象に */
}

.cstm-box-title-float .box-title {
   background-color: #CCA99D; /* タイトルの背景色 */
   color: #fff; /* タイトルの文字色（白） */
   padding: 0.1em 1em; /* タイトルの内側余白（上下・左右） */
   position: absolute; /* 親要素（.cstm-box-title-float）の中で固定配置 */
   top: -0.8em; /* タイトルをボックスの上に少しはみ出させる */
   left: 1em; /* 左側に少し余白を取る */
   display: inline-block; /* タイトルの幅を内容に合わせる */
   font-size: 0.9em; /* タイトルのフォントサイズを設定 */
   border-radius: 5px; /* タイトルの角を丸める */
   width: auto; /* タイトル幅を内容に応じて可変にする */
   max-width: calc(100% - 2em); /* 左右の余白を考慮して最大幅を調整 */
   white-space: nowrap; /* タイトルを1行に固定 */
   overflow: hidden; /* はみ出した部分を非表示 */
   text-overflow: ellipsis; /* 省略記号（...）を表示 */
}

.cstm-box-title-float .box-content {
   padding: 3em 2em 2em; /* 上部の余白を多めに確保し、タイトルと本文が重ならないようにする */
}

.cstm-box-title-float p { margin:0; }

<div class="cstm-box-tape">
  <div class="box-title">ここにタイトルを入力</div>
  <div class="box-content"> 
   <p>透明テープ風のタイトル</p>
  </div>
</div>

/* セロテープ風 */
.cstm-box-tape {
   position: relative; /* タイトルをボックス内の左上に配置するための基準 */
   margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
   background-color: #E6ECF2; /* ボックス背景色 */
}

.cstm-box-tape .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); /* テープの傾き */
   color: #666; /* タイトル文字色 */
   padding: 10px 20px; /* タイトルの余白 */
   line-height: 1; /* タイトルの行の高さ */
   position: absolute; /* 親要素の左上に固定 */
   top: -1em; /* 上端に配置 */
   left: 1em; /* 左端に配置 */
   display: inline-block; /* タイトルの幅を内容に合わせる */
   font-size: 0.9em; /* タイトルのフォントサイズ */
   width: auto; /* タイトル幅を内容に応じて可変にする */
   max-width: calc(100% - 2em); /* 左右の余白を考慮して最大幅を調整 */
   white-space: nowrap; /* タイトルを1行に固定 */
   overflow: hidden; /* はみ出した部分を非表示 */
   text-overflow: ellipsis; /* 省略記号（...）を表示 */
}

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

/* pタグの余白を0にする */
.cstm-box-tape p { margin:0; }

<div class="cstm-box-memo">
<div class="box-title">MEMO</div>
   <p>メモ帳アイコンでカジュアルに</p>
</div>

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

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

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

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

/* pタグのmarginを0にする */
.cstm-box-memo p { margin:0; }

<div class="cstm-box-alert">
<div class="box-title">タイトルを入力</div>
   <p>びっくりマーク！で強調</p>
</div>

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

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

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

/* pタグの余白 */
.cstm-box-alert p { margin:0; }

<div class="cstm-box-help">
<div class="box-title">タイトルを入力</div>
   <p>はてなマーク？で疑問を表現</p>
</div>

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

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

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

/* pタグの余白 */
.cstm-box-help p { margin:0; }

<div class="cstm-box-check">
<div class="box-title">Check</div>
   <p>チェックマーク✓で完了や確認を表現</p>
</div>

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

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

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

/* pタグの余白 */
.cstm-box-check p { margin:0; }