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

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

border-width:10%; 

Mais ça ne marche pas.

Modifier:

la raison pour laquelle je veux définir la largeur de la bordure en pourcentage est que j’ai un élément avec une width: 80%; et height:80%; , et je veux que l’élément couvre toute la fenêtre du navigateur, donc je veux définir toutes les bordures à 10%. Je ne le fais pas avec la méthode des deux éléments, dans laquelle l’un serait placé derrière l’autre et ferait office de bordure, car l’arrière-plan de l’élément est transparent, et le positionnement d’un élément derrière lui affecterait la transparence.

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

Border ne supporte pas le pourcentage … mais c’est toujours possible …

Comme d’autres l’ont signalé, les pourcentages ne sont pas pris en charge sur les bordures:

 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width' Value:  | 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 le voir, il indique : Pourcentages: so .

Solution non scriptée

Vous pouvez simuler vos limites de pourcentage avec un élément wrapper dans lequel vous souhaitez:

  1. définir la background-color d’ background-color l’élément wrapper sur la background-color de bordure souhaitée
  2. définir le padding l’élément wrapper en pourcentages (car ils sont pris en charge)
  3. définir la background-color d’ background-color vos éléments sur blanc (ou autre chose)

Cela simulerait en quelque sorte vos limites de pourcentage. Voici un exemple d’élément avec des bordures latérales de 25% de largeur utilisant cette technique.

HTML utilisé dans l’exemple

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

Vous pouvez aussi utiliser

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

OU

 border: 9vw solid #F5E5D6; 

Donc, c’est une question plus ancienne, mais pour ceux qui recherchent 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 div à un pourcentage, et toute bordure que vous ajoutez à la div sera incluse dans ce pourcentage. Ainsi, par exemple, ce qui suit appendait la bordure 1px à l’intérieur de la largeur de la div:

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

Si vous souhaitez plus d’informations: http://css-sortingcks.com/box-sizing/

Vous pouvez utiliser em pour pourcentage au lieu de pixels,

Exemple:

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

Les valeurs en pourcentage ne sont pas applicables à la border-width en CSS. Ceci est répertorié dans la spécification .

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

Les navigateurs modernes prennent en charge les unités vh et vw , qui représentent un pourcentage de la fenêtre d’affichage.

Vous pouvez donc avoir des bordures CSS pures en pourcentage de la taille de la fenêtre:

 border: 5vw solid red; 

Essayez cet exemple et changez la largeur de la fenêtre; la bordure changera d’épaisseur lorsque la taille de la fenêtre change. box-sizing: border-box; peut être utile aussi.

Dimensionnement de la boîte
définir la taille de la boîte à la taille de la boîte de bordure box-sizing: border-box; et définissez la largeur à 100% et une largeur fixe pour la bordure, puis ajoutez une largeur minimale pour que, pour un petit écran, la bordure ne dépasse pas tout l’écran

Vous pouvez créer une bordure personnalisée à l’aide d’un span. Créez un intervalle avec une classe (spécifiant la direction dans laquelle se passe la bordure) et un identifiant:

   

Ensuite, allez à CSS et définissez la classe sur position:absolute , height:100% (Pour les bordures verticales), width:100% (For Horizontal Borders), margin:0% et background-color:#000000; . Ajouter tout ce qui est nécessaire:

 body{ margin:0%; } div.mdiv{ position:absolute; width:100%; height:100%; top:0%; left:0%; margin:0%; } header.mheader{ position:absolute; width:100%; height:20%; /* You can set this to whatever. I will use 20 for easier calculations. You don't need a header. I'm using it to show you the difference. */ top:0%; left:0%; margin:0%; } span.HorizontalBorder{ position:absolute; width:100%; margin:0%; background-color:#000000; } span.VerticalBorder{ position:absolute; height:100%; margin:0%; background-color:#000000; } 

Ensuite, définissez l’id qui correspond à class="VerticalBorder" en top:0%; , à left:0%; , width:1%; (Puisque la largeur du mdiv est égale à la largeur de l’en-tête à 100%, la largeur correspondra à 100% de celle que vous avez définie. Si vous définissez la largeur à 1%, la bordure aura 1% de la largeur de la fenêtre) . Définissez l’id qui correspond à la class="HorizontalBorder" en top:99% (comme il se trouve dans un conteneur d’en-tête, le haut fait référence à la position dans laquelle il se trouve en fonction de l’en-tête. veulent qu’il atteigne le fond), à left:0%; et height:1% (puisque la hauteur du mdiv est 5 fois plus grande que la hauteur du godet [100% = 100, 20% = 20, 100/20 = 5], la hauteur sera de 20% de celle que vous avez définie. Si vous définissez la hauteur à 1%, la bordure sera égale à 0,2% de la hauteur de la fenêtre. Voici comment cela va ressembler:

 span#Span1{ top:0%; left:0%; width:.4%; } span#Span2{ top:99%; left:0%; width:1%; } 

AVERTISSEMENT: Si vous redimensionnez la fenêtre à une taille suffisamment petite, les bordures disparaîtront. Une solution serait de limiter la taille de la bordure si la fenêtre est redimensionnée à un certain point. Voici ce que j’ai fait:

 window.addEventListener("load", Loaded); function Loaded() { window.addEventListener("resize", Resized); function Resized() { var WindowWidth = window.innerWidth; var WindowHeight = window.innerHeight; var Span1 = document.getElementById("Span1"); var Span2 = document.getElementById("Span2"); if (WindowWidth <= 800) { Span1.style.width = .4; } if (WindowHeight <= 600) { Span2.style.height = 1; } } } 

Si vous avez tout fait correctement, cela devrait ressembler à ce lien: https://jsfiddle.net/umhgkvq8/12/ Pour une raison quelconque, la bordure disparaîtra dans jsfiddle mais pas si vous la lancez dans un navigateur .

Jetez un oeil à la spécification calc () . Voici un exemple d’utilisation:

 border-right:1px solid; border-left:1px solid; width:calc(100% - 2px);