Bordures et décorations de boîte CSS

Le module de bordures et décorations de boîte CSS fournit des propriétés permettant d'ajouter des bordures, des formes de coins,et des ombres de boîte aux éléments. Ce module étend les bordures et décorations de boîte introduites dans le module Arrière-plans et bordures CSS, en ajoutant les propriétés corner-shape et border-shape, les propriétés logiques border-radius, les propriétés longues pour la propriété box-shadow et des propriétés pour créer des bordures partielles.

Bordures et décorations de boîte en action

Sélectionnez une valeur superellipse() dans le menu déroulant pour changer la forme de la bordure. Utilisez le curseur pour modifier la taille du rayon de la bordure. Cochez la case pour afficher ou masquer l'ombre de la boîte.

<p>
  <label for="choix-forme-coin"
    >Choisissez une valeur <code>superellipse()</code>&nbsp;:</label
  >
  <select id="choix-forme-coin">
    <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="rayon"
    >Choisir une valeur <code>border-radius</code>&nbsp;:</label
  >
  <input
    type="range"
    step="5"
    min="0"
    max="100"
    value="30"
    id="rayon"
    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">Basculer l'ombre de la boîte</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("rayon");

function definirFormeCooin() {
  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", definirFormeCooin);
range.addEventListener("input", definirFormeCooin);
definirFormeCooin();

Référence

Propriétés

Le module des bordures CSS et décorations de boîte niveau 4 introduit également les propriétés border-shape, border-limit et border-clip, ainsi que les propriétés longues border-clip-bottom, border-clip-left, border-clip-right et border-clip-top. Actuellement, aucun navigateur ne prend en charge ces fonctionnalités. Le module introduit également des propriétés composants pour les propriétés bien prises en charge border-radius et box-shadow, y compris 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 et box-shadow-spread. Ces propriétés composants ne sont également pas encore prises en charge.