Comment faire en sorte que les éléments enfants respectent les bordures courbes en CSS : une question de débordement ?

Résoudre le dilemme d'obéissance à la frontière enfant-parent en CSS

Lorsqu'il s'agit d'éléments imbriqués en CSS, il est souvent nécessaire que l'élément enfant adhérer aux bordures incurvées de son élément parent. Cependant, cela peut parfois poser un problème, ce qui entraîne l'extension de l'élément enfant au-delà des limites de son parent.

Le problème :

Considérez le code HTML et CSS suivant :

<code class="html"><div id="outer">
  <div id="inner"></div>
</div></code>

<code class="css">#outer {
  display: block;
  width: 200px;
  background-color: white;
  overflow: hidden;
  border-radius: 10px;
}

#inner {
  background-color: green;
  height: 10px;
}</code>

Dans ce scénario, le #inner div s'étendra au-delà des frontières courbes du #outer div, créant un chevauchement indésirable.

La solution :

Selon les spécifications CSS3, les éléments tels que les éléments au niveau du bloc sont découpés à la courbe de la bordure de leur parent. Cependant, il existe quelques exceptions, dont l'une concerne les éléments remplacés.

Éléments remplacés :

Éléments remplacés, tels que et