Comment puis-je créer des bordures basées sur un pourcentage en CSS ?

Comment définir l'épaisseur des bordures en pourcentages ?

La définition des largeurs de bordure à l'aide de pourcentages n'est pas directement prise en charge dans CSS . Cependant, vous pouvez simuler ce comportement en utilisant une combinaison de techniques CSS.

Vous pouvez envelopper l'élément auquel vous souhaitez ajouter des bordures dans un wrapper. élément avec les propriétés suivantes :

• Définissez la couleur d'arrière-plan de l'élément wrapper sur la couleur de bordure souhaitée.


• Définissez le remplissage de l'élément wrapper en pourcentages pour simuler la largeur de la bordure.


• Définissez la couleur d'arrière-plan de l'élément interne sur la couleur souhaitée dans le border.

Cette technique crée l'illusion de pourcentages de bordure en utilisant un remplissage et des couleurs d'arrière-plan.

Exemple Code

<br>.faux-borders {<br> couleur de fond : #f00;<br> remplissage : 1px 25 % ; /<em> Simuler une bordure de 25% sur les côtés </em>/<br>}</p>
<p>.content {<br> background-color : #fff;<br>}</p>
<p>&lt ;div> <div class="content"></p>
<pre class="brush:php;toolbar:false">This element has simulated percentage borders.