Comment définir l'épaisseur de la bordure en pourcentage ?

Question

Comment définir la largeur de la bordure d'un élément en pourcentage ? J'ai essayé la syntaxe

border-width:10%;

Mais ça ne marche pas.

La raison pour laquelle je veux mettre border-width dans les pourcentages est que j'ai un élément avec width: 80%; y height: 80%; Je veux que l'élément couvre la totalité de la fenêtre du navigateur et je veux donc que toutes les bordures soient à 10 %. Je ne peux pas le faire avec la méthode des deux éléments, dans laquelle l'un serait positionné derrière l'autre et ferait office de bordure, car l'arrière-plan de l'élément est transparent et le fait de positionner un élément derrière lui affecterait sa transparence.

Je sais que cela peut être fait via JavaScript, mais je cherche une méthode uniquement CSS, si possible.

Answer 1

Border ne prend pas en charge le pourcentage... mais c'est toujours possible...

Comme d'autres l'ont souligné Spécification CSS Les pourcentages ne sont pas supportés par les frontières :

'border-top-width',
'border-right-width',
'border-bottom-width',
'border-left-width'
  Value:          <border-width> | inherit
  Initial:        medium
  Applies to:     all elements
  Inherited:      no
  Percentages:    N/A
  Media:          visual
  Computed value: absolute length; '0' if the border style is 'none' or 'hidden'

Comme vous pouvez voir il dit Pourcentages : N/A .

Solution non scénarisée

Vous pouvez simuler vos bordures en pourcentage à l'aide d'un élément enveloppant où vous le feriez :

1. Définir les paramètres de l'élément d'habillage background-color à la couleur de bordure souhaitée
2. Définir les paramètres de l'élément d'habillage padding en pourcentages (parce qu'ils sont soutenus)
3. définissez vos éléments background-color en blanc (ou ce qui doit l'être)

Cela simulerait en quelque sorte votre pourcentage de frontières. Voici un exemple d'un élément avec un côté de 25% de largeur frontières qui utilise cette technique.

HTML utilisé dans l'exemple

.faux-borders {
    background-color: #f00;
    padding: 1px 25%; /* set padding to simulate border */
}
.content {
    background-color: #fff;
}

<div class="faux-borders">
    <div class="content">
        This is the element to have percentage borders.
    </div>
</div>

Question : Vous devez être conscient que cela sera beaucoup plus compliqué si un arrière-plan complexe est appliqué à votre élément... Surtout si cet arrière-plan est hérité de la hiérarchie DOM ancestrale. Mais si votre interface utilisateur est assez simple, vous pouvez le faire de cette façon.

Solution scénarisée

@BoltClock a mentionné une solution scriptée. où vous pouvez calculer par programme la largeur de la bordure en fonction de la taille de l'élément.

En voici un exemple avec un script extrêmement simple utilisant jQuery.

var el = $(".content");
var w = el.width() / 4 | 0; // calculate & trim decimals
el.css("border-width", "1px " + w + "px");

.content { border: 1px solid #f00; }

<div class="content">
    This is the element to have percentage borders.
</div>

Mais vous devez être conscient que vous devrez ajuster la largeur de la bordure chaque fois que votre modifications de la taille des conteneurs (c'est-à-dire le redimensionnement de la fenêtre du navigateur). Mon premier contournement avec l'élément wrapper semble beaucoup plus simple car il ajustera automatiquement la largeur dans ces situations.

Le côté positif de la solution scriptée est qu'elle ne souffre pas des problèmes de fond mentionnés dans ma solution non-scriptée précédente.

Answer 2

Vous pouvez également utiliser

border-left: 9vw solid #F5E5D6;
border-right: 9vw solid #F5E5D6;     

OU

border: 9vw solid #F5E5D6;

Answer 3

Il s'agit d'une question plus ancienne, mais pour ceux qui cherchent encore une réponse, la propriété CSS Box-Sizing est inestimable ici :

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit  */
-moz-box-sizing: border-box;    /* Firefox, other Gecko         */
box-sizing: border-box; 

Cela signifie que vous pouvez définir la largeur de la division sur un pourcentage, et que toute bordure ajoutée à la division sera incluse dans ce pourcentage. Ainsi, par exemple, l'exemple suivant ajoutera une bordure de 1px à l'intérieur de la largeur de la division :

div { box-sizing:border-box; width:50%; border-right:1px solid #000; }         

Si vous voulez plus d'informations : http://css-tricks.com/box-sizing/

Answer 4

Vous pouvez utiliser em pour le pourcentage au lieu de pixels,

Exemple :

border:10PX dotted #c1a9ff; /* In Pixels */
border:0.75em dotted #c1a9ff; /* Exact same as above in Percentage */

Answer 5

Les valeurs en pourcentage ne sont pas applicables à border-width en CSS. Cela figure dans le spec .

Vous devrez utiliser JavaScript pour calculer le pourcentage de la largeur de l'élément ou toute autre quantité de longueur dont vous avez besoin, et appliquer le résultat dans px ou similaire aux bordures de l'élément.