CSS 境界とボックス装飾

CSS 境界とボックス装飾 (CSS borders and box decorations) モジュールは、要素に境界線、角の形状、ボックスシャドウを追加するためのプロパティを提供します。このモジュールは、CSS 背景と境界モジュールで導入された境界とボックス装飾を拡張し、corner-shape および border-shape プロパティ、論理的な border-radius プロパティ、box-shadow プロパティの個別指定プロパティ、部分的な境界線を作成するためのプロパティを追加します。

境界とボックス装飾の実演

ドロップダウンメニューから superellipse() 値を選択して枠線の形状を変更してください。スライダーで枠線の半径サイズを変更してください。チェックボックスを切り替えて、ボックスシャドウの表示/非表示を切り替えてください。

<p>
  <label for="corner-shape-choice"
    ><code>superellipse()</code> の値を選択:</label
  >
  <select id="corner-shape-choice">
    <option>superellipse(infinity)</option>
    <option>superellipse(5)</option>
    <option>superellipse(3)</option>
    <option>superellipse(2)</option>
    <option>superellipse(1.5)</option>
    <option>superellipse(1)</option>
    <option>superellipse(0.5)</option>
    <option>superellipse(0)</option>
    <option>superellipse(-0.5)</option>
    <option selected>superellipse(-1)</option>
    <option>superellipse(-1.5)</option>
    <option>superellipse(-2)</option>
    <option>superellipse(-3)</option>
    <option>superellipse(-5)</option>
    <option>superellipse(-infinity)</option>
  </select>
</p>
<p>
  <label for="radius"><code>border-radius</code> の値を選択:</label>
  <input
    type="range"
    step="5"
    min="0"
    max="100"
    value="30"
    id="radius"
    list="tens" />
  <datalist id="tens">
    <option value="0" label="0"></option>
    <option value="20" label="20px"></option>
    <option value="40" label="40px"></option>
    <option value="60" label="60px"></option>
    <option value="80" label="80px"></option>
    <option value="100" label="100px"></option>
  </datalist>
</p>

<p>
  <input type="checkbox" id="check" />
  <label for="check">box-shadow を切り替え</label>
</p>
<div></div>

div {
  width: 100%;
  height: 200px;
  background-color: plum;
  background-image:
    repeating-linear-gradient(transparent 0 19px, #00000022 19px 20px),
    repeating-linear-gradient(to left, transparent 0 19px, #00000022 19px 20px);
}

div {
  box-shadow: 3px 3px 5px rgb(0 0 0 / 0.5);
  border-radius: 30px;
}
body:has(input:checked) div {
  box-shadow: none;
}

@layer page-setup {
  html {
    font-family: "Helvetica", "Arial", sans-serif;
  }
  body {
    max-width: 600px;
    min-width: fit-content;
    margin: 20px auto;
  }
  div {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
  }
  select {
    padding: 3px 5px;
  }
  code {
    font-weight: bolder;
  }
}

const rectangle = document.querySelector("div");
const select = document.querySelector("select");
const range = document.getElementById("radius");

function setCornerShape() {
  rectangle.style.cornerShape = select.value;
  rectangle.style.borderRadius = `${range.value}px`;
  rectangle.innerHTML = `<pre>div {
  corner-shape: ${select.value};
  border-radius: ${range.value}px;
}</pre>`;
}

select.addEventListener("change", setCornerShape);
range.addEventListener("input", setCornerShape);
setCornerShape();

リファレンス

プロパティ

CSS 境界とボックス装飾モジュールレベル 4 は、 border-shape, border-limit, border-clip の各プロパティと、一緒に border-clip-bottom, border-clip-left, border-clip-right, border-clip-top の個別指定プロパティを導入しています。今のところ、これらの機能に対応しているブラウザーはありません。このモジュールは対応が進んでいる border-radius および box-shadow の成分プロパティとして、 border-block-end-radius, border-block-start-radius, border-bottom-radius, border-inline-end-radius, border-inline-start-radius, border-right-radius, border-top-radius, box-shadow-blur, box-shadow-color, box-shadow-offset, box-shadow-position, box-shadow-spread を導入しています。これらの成分プロパティもまだ対応されていません。