CSSで作る！かわいい・おしゃれな枠デザイン集【コピペOK】

CSSだけで簡単に作れる枠デザインを紹介します。すべてクラス名を変えて使い分けでき、WordPressのクラシックエディタでもそのまま動作します。

1 シンプル枠（基本形）

/* --------------------------------
 * シンプル枠（基本形）
------------------------------- */
[class^="frame-"] {
  padding: 20px; /* 内側余白を20pxに設定 */
  margin: 20px 0; /* 上下に20pxの余白を追加 */
  font-size: 1rem; /* フォントサイズを標準に設定 */
}
.frame-basic {
  border: 2px solid #333; /* シンプルな黒線の枠を設定 */
}

2 角丸＋影つき枠

/* --------------------------------
 * 角丸＋影つき枠
------------------------------- */
[class^="frame-"] {
  padding: 20px; /* 内側余白を20pxに設定 */
  margin: 20px 0; /* 上下余白を20pxに設定 */
  font-size: 1rem; /* 標準フォントサイズ */
}
.frame-shadow {
  border: 2px solid #4facfe; /* 青系の枠線を設定 */
  border-radius: 12px; /* 角を12pxの半径で丸く */
  box-shadow: 2px 2px 10px rgba(0,0,0,0.2); /* やや柔らかい影を追加 */
}

3 左線のみの見出し風ボックス

/* --------------------------------
 * 左線のみの見出し風ボックス
------------------------------- */
[class^="frame-"] {
  padding: 20px; /* 内容に余裕を持たせる */
  margin: 20px 0; /* 各ボックスの間隔を確保 */
  font-size: 1rem; /* 統一した文字サイズ */
}
.frame-left {
  border-left: 5px solid #4facfe; /* 左側に太めの青線を設定 */
  background: #f8fcff; /* 背景を薄い青に */
}

4 グラデーションボーダー枠

/* --------------------------------
 * グラデーションボーダー枠
------------------------------- */
[class^="frame-"] {
  padding: 20px; /* 内側余白を確保 */
  margin: 20px 0; /* 間隔を確保 */
  font-size: 1rem; /* 統一文字サイズ */
}
.frame-gradient {
  border: 4px solid; /* 枠線を4pxに設定 */
  border-image: linear-gradient(45deg, #4facfe, #00f2fe) 1; /* グラデーション枠を適用 */
  border-radius: 10px; /* 角を軽く丸める */
}

5 二重線のクラシック枠

/* --------------------------------
 * 二重線のクラシック枠
------------------------------- */
[class^="frame-"] {
  padding: 20px; /* 内側余白 */
  margin: 20px 0; /* 間隔 */
  font-size: 1rem; /* フォント統一 */
}
.frame-double {
  border: 4px double #666; /* 二重線・グレーのクラシックな枠 */
}

6 点線のふんわり枠

/* --------------------------------
 * 点線のふんわり枠
------------------------------- */
[class^="frame-"] {
  padding: 20px; /* 内側余白 */
  margin: 20px 0; /* 間隔を調整 */
  font-size: 1rem; /* 標準文字サイズ */
}
.frame-dotted {
  border: 2px dotted #aaa; /* 優しい印象の点線枠 */
  border-radius: 10px; /* 角を少し丸めて柔らかく */
}

7 破線のカジュアル枠

/* --------------------------------
 * 破線のカジュアル枠
------------------------------- */
[class^="frame-"] {
  padding: 20px; /* ボックス内部の余白を20pxに設定 */
  margin: 20px 0; /* 上下に20pxの間隔を確保 */
  font-size: 1rem; /* フォントサイズを標準化 */
}
.frame-dashed {
  border: 2px dashed #888; /* グレー系の破線を設定してカジュアルに */
  border-radius: 8px; /* 角を少し丸めて柔らかく見せる */
}

8 タイトル付きボックス（ラベル風）

/* --------------------------------
 * タイトル付きボックス（ラベル風）
------------------------------- */
[class^="frame-"] {
  padding: 20px; /* ボックス内側の余白を設定 */
  margin: 20px 0; /* 上下間隔を20px確保 */
  font-size: 1rem; /* 文字サイズを統一 */
}
.frame-label {
  position: relative; /* タイトルラベルを重ねるための基準に */
  border: 2px solid #ff7e5f; /* オレンジ色の枠線を設定 */
  border-radius: 10px; /* 柔らかい印象の丸み */
  background: #fff7f4; /* 薄いオレンジ背景で温かみを演出 */
  padding: 30px 20px 20px; /* 上に余白を多めにとる（ラベル分） */
}
.frame-label .label-title {
  position: absolute; /* 枠内の上に固定配置 */
  top: -15px; /* 枠の上に浮かせる */
  left: 15px; /* 左寄せ位置調整 */
  background: #ff7e5f; /* ラベル背景はオレンジ */
  color: #fff; /* 文字を白に */
  padding: 3px 10px; /* 内側余白を設定 */
  border-radius: 5px; /* 角を丸める */
  font-size: 0.9rem; /* 少し小さめフォント */
  font-weight: bold; /* 太字で強調 */
}

9 内側に影を落としたフレーム

/* --------------------------------
 * 内側に影を落としたフレーム
------------------------------- */
[class^="frame-"] {
  padding: 20px; /* ボックス内側余白 */
  margin: 20px 0; /* 間隔調整 */
  font-size: 1rem; /* 文字サイズ標準 */
}
.frame-inset {
  border: 1px solid #ccc; /* 薄いグレーの枠線を設定 */
  box-shadow: inset 2px 2px 8px rgba(0,0,0,0.2); /* 内側に影を付けて奥行きを演出 */
  background: #fafafa; /* やや明るいグレー背景 */
}

10 アウトライン＋背景カラー枠

/* --------------------------------
 * アウトライン＋背景カラー枠
------------------------------- */
[class^="frame-"] {
  padding: 20px; /* 内側余白 */
  margin: 20px 0; /* 上下間隔 */
  font-size: 1rem; /* フォント統一 */
}
.frame-outline {
  border: 3px solid #4facfe; /* 青系の太線を設定 */
  background: #f0f8ff; /* 淡い水色の背景を設定 */
  border-radius: 8px; /* 角を丸めて優しい印象に */
}

11 影＋浮き上がりカード風枠

/* --------------------------------
 * 影＋浮き上がりカード風枠
------------------------------- */
[class^="frame-"] {
  padding: 20px; /* 内側余白を設定 */
  margin: 20px 0; /* 上下間隔を確保 */
  font-size: 1rem; /* 統一文字サイズ */
}
.frame-floating {
  padding: 20px; /* ボックス内部余白 */
  margin: 20px 0; /* 上下スペース */
  border: 1px solid #ccc; /* 薄いグレー枠 */
  border-radius: 12px; /* 丸みを付けて柔らかく */
  background: #fff; /* 白背景でカード風に */
  box-shadow: 0 8px 16px rgba(0,0,0,0.2); /* 下方向に影を付ける */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* ホバー時のアニメーション */
}
.frame-floating:hover {
  transform: translateY(-5px); /* 少し浮かせて立体感を出す */
  box-shadow: 0 12px 24px rgba(0,0,0,0.3); /* より強い影に変化 */
}

12 角だけ丸い枠（Top-left / Bottom-right）

/* --------------------------------
 * 角だけ丸い枠
------------------------------- */
[class^="frame-"] {
  padding: 20px; /* ボックス余白 */
  margin: 20px 0; /* 上下間隔を20px */
  font-size: 1rem; /* 文字サイズを標準に */
}
.frame-corner {
  border: 2px solid #4facfe; /* 青い枠線を設定 */
  border-top-left-radius: 20px; /* 左上を丸く */
  border-bottom-right-radius: 20px; /* 右下を丸く */
  background: #f0f8ff; /* 背景を淡い青に */
}

13 丸枠＋影付き（サークルボックス）

/* --------------------------------
 * 丸枠＋影付き（サークルボックス）
------------------------------- */
[class^="frame-"] {
  padding: 20px; /* 内側余白 */
  margin: 20px 0; /* ボックス間隔 */
  font-size: 1rem; /* 文字統一 */
}
.frame-circle {
  padding: 30px; /* 内側余白をやや多めに */
  border: 3px solid #ff7e5f; /* オレンジの太線を設定 */
  border-radius: 50%; /* 真円にする */
  width: 150px; /* 固定幅 */
  height: 150px; /* 固定高さ */
  text-align: center; /* 中央揃え */
  line-height: 90px; /* テキスト縦位置調整 */
  background: #fff7f4; /* 柔らかいオレンジ背景 */
  box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* 外側に影を付与 */
}

14 二重影＋グラデーション枠

/* --------------------------------
 * 二重影＋グラデーション枠
------------------------------- */
[class^="frame-"] {
  padding: 20px; /* 内側に余白を設定 */
  margin: 20px 0; /* 上下に余白を確保 */
  font-size: 1rem; /* 統一フォントサイズ */
}
.frame-double-shadow {
  padding: 20px; /* コンテンツの余白 */
  margin: 20px 0; /* ボックスの上下間隔 */
  border: 3px solid transparent; /* 透明な枠線を設定（背景との境界を作る） */
  border-radius: 12px; /* 角を丸くして柔らかい印象に */
  background: linear-gradient(to right, #4facfe, #00f2fe); /* 青系グラデーション背景 */
  box-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 8px 16px rgba(0,0,0,0.1); /* 二重の影で立体感を出す */
  color: #fff; /* テキストを白にしてコントラストを確保 */
}

15 点線＋角丸＋背景カラー枠

/* --------------------------------
 * 点線＋角丸＋背景カラー枠
------------------------------- */
[class^="frame-"] {
  padding: 20px; /* 内側余白を確保 */
  margin: 20px 0; /* 上下の余白を設定 */
  font-size: 1rem; /* フォントサイズを統一 */
}
.frame-dotted-bg {
  padding: 20px; /* コンテンツの内側余白 */
  margin: 20px 0; /* ボックス間隔 */
  border: 2px dotted #ff7e5f; /* オレンジの点線を設定 */
  border-radius: 12px; /* 丸みを加える */
  background: #fff0f0; /* 淡い背景色で優しい印象に */
}

16 斜めストライプ枠

/* --------------------------------
 * 斜めストライプ枠
------------------------------- */
[class^="frame-"] {
  padding: 20px; /* 内側の余白を設定 */
  margin: 20px 0; /* 上下のスペースを確保 */
  font-size: 1rem; /* フォントサイズを統一 */
}
.frame-stripe {
  padding: 20px; /* ボックス内余白 */
  margin: 20px 0; /* 上下間隔 */
  border: 3px solid #4facfe; /* 青系の太線枠 */
  border-radius: 10px; /* 丸みを加えて柔らかさを演出 */
  background: repeating-linear-gradient(
    45deg, /* 45度の斜めパターン */
    #e0f7ff, /* 明るい青1 */
    #e0f7ff 10px, /* ストライプ幅 */
    #ccefff 10px, /* 明るい青2 */
    #ccefff 20px /* ストライプの周期 */
  ); /* 斜めストライプの背景を作成 */
}

17 グラデーション＋丸角＋文字影枠

/* --------------------------------
 * グラデーション＋丸角＋文字影枠
------------------------------- */
[class^="frame-"] {
  padding: 20px; /* ボックス内部余白 */
  margin: 20px 0; /* 上下間隔 */
  font-size: 1rem; /* 統一フォント */
}
.frame-textshadow {
  padding: 20px; /* 内側余白 */
  margin: 20px 0; /* ボックス間隔 */
  border-radius: 12px; /* 角を丸くする */
  background: linear-gradient(135deg, #ff9a9e, #fad0c4); /* ピンク系のグラデーション */
  color: #333; /* テキスト色は濃いグレーで可読性UP */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2); /* 文字に軽い影を付けて立体感を出す */
}

18 二重枠＋内側グラデーション

/* --------------------------------
 * 二重枠＋内側グラデーション
------------------------------- */
[class^="frame-"] {
  padding: 20px; /* 内側余白設定 */
  margin: 20px 0; /* 上下余白設定 */
  font-size: 1rem; /* 統一フォントサイズ */
}
.frame-inner-gradient {
  padding: 20px; /* 内側のスペース */
  margin: 20px 0; /* 上下間隔 */
  border: 4px double #4facfe; /* 青系の二重線枠 */
  border-radius: 12px; /* 丸角設定 */
  background: linear-gradient(to bottom, #e0f7ff, #ffffff); /* 内側に淡いグラデーションを付与 */
}

19 ポップな角丸＋斜め影枠

/* --------------------------------
 * ポップな角丸＋斜め影枠
------------------------------- */
[class^="frame-"] {
  padding: 20px; /* 内側余白 */
  margin: 20px 0; /* 上下スペース */
  font-size: 1rem; /* フォント統一 */
}
.frame-diagonal-shadow {
  padding: 20px; /* コンテンツ内余白 */
  margin: 20px 0; /* 間隔設定 */
  border-radius: 15px; /* 丸みを強調 */
  border: 2px solid #ff7e5f; /* オレンジの外枠 */
  background: #fff7f0; /* 明るい背景 */
  box-shadow: 4px 4px 12px rgba(0,0,0,0.2); /* 右下方向に影を付ける */
}

20 光沢感＋グラデーション枠

/* --------------------------------
 * 光沢感＋グラデーション枠
------------------------------- */
[class^="frame-"] {
  padding: 20px; /* 内側余白を設定 */
  margin: 20px 0; /* 上下のスペースを確保 */
  font-size: 1rem; /* フォントサイズ統一 */
}
.frame-glossy {
  padding: 20px; /* 内側余白設定 */
  margin: 20px 0; /* 上下間隔 */
  border-radius: 12px; /* 丸角を付ける */
  border: 2px solid #4facfe; /* 外枠は青系の細線 */
  background: linear-gradient(145deg, #e6f0ff, #ffffff); /* 光沢感のあるグラデーション */
  box-shadow: inset 0 2px 5px rgba(255,255,255,0.5), 0 4px 8px rgba(0,0,0,0.1); /* 内外両方に影を設定して立体感を出す */
}