¿Cómo establecer el grosor del borde en porcentajes?

¿Cómo establecer el ancho del borde de un elemento en porcentajes? Intenté la syntax

border-width:10%; 

Pero no funciona.

Editar:

El motivo por el que quiero establecer el ancho del borde en porcentajes es porque tengo un elemento con width: 80%; y height:80%; , y quiero que el elemento cubra toda la ventana del navegador, por lo que quiero establecer todos los bordes 10%. No estoy haciendo esto con el método de dos elementos, en el que uno se colocaría detrás del otro y actuaría como borde, porque el fondo del elemento es transparente, y posicionar un elemento detrás de él afectaría su transparencia.

Sé que esto se puede hacer a través de JavaScript, pero estoy buscando un método de solo CSS, si es posible.

El borde no admite porcentaje … pero aún es posible …

Como otros han señalado la especificación de CSS , los porcentajes no son compatibles con las fronteras:

 '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' 

Como puede ver , dice Porcentajes: N / A.

Solución sin guión

Puede simular los bordes de su porcentaje con un elemento contenedor donde:

  1. establecer el background-color de background-color del elemento de envoltura en el background-color de borde deseado
  2. establecer el padding del elemento de envoltura en porcentajes (porque son compatibles)
  3. establece tus elementos background-color en blanco (o lo que sea)

Esto de alguna manera simularía sus fronteras porcentuales. Aquí hay un ejemplo de un elemento con bordes laterales de 25% de ancho que usa esta técnica.

HTML utilizado en el ejemplo

 .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.

También puedes usar

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

O

 border: 9vw solid #F5E5D6; 

Así que esta es una pregunta más antigua, pero para aquellos que aún están buscando una respuesta, la propiedad de CSS Box-Sizing no tiene precio aquí:

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

Significa que puede establecer el ancho de la div en un porcentaje, y cualquier borde que agregue al div se incluirá dentro de ese porcentaje. Entonces, por ejemplo, lo siguiente agregaría el borde de 1px al interior del ancho del div:

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

Si desea más información: http://css-tricks.com/box-sizing/

Puedes usar em para porcentaje en lugar de píxeles,

Ejemplo:

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

Los valores porcentuales no son aplicables al border-width en CSS. Esto se enumera en la especificación .

Tendrá que usar JavaScript para calcular el porcentaje del ancho del elemento o la cantidad de longitud que necesite, y aplicar el resultado en px o similar a los bordes del elemento.

Los navegadores modernos admiten unidades vh y vw , que son un porcentaje de la ventana de la ventana.

Para que pueda tener bordes de CSS puro como un porcentaje del tamaño de la ventana:

 border: 5vw solid red; 

Pruebe este ejemplo y cambie el ancho de la ventana; el borde cambiará de grosor a medida que la ventana cambie de tamaño. box-sizing: border-box; puede ser útil también

Tamaño de la caja
establecer el tamaño de la caja en el cuadro de la frontera tamaño de la box-sizing: border-box; y configure el ancho al 100% y un ancho fijo para el borde, luego agregue un ancho mínimo para que, en una pantalla pequeña, el borde no supere toda la pantalla

Puede hacer un borde personalizado usando un tramo. Haz un lapso con una clase (especificando la dirección en la que va el borde) y una identificación:

   

Luego, acceda a su CSS y configure la clase en la position:absolute , height:100% (para bordes verticales), width:100% (para bordes horizontales), margin:0% y background-color:#000000; . Agrega todo lo que sea necesario:

 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; } 

A continuación, establezca el ID que corresponde a class="VerticalBorder" al top:0%; , left:0%; , width:1%; (Dado que el ancho del mdiv es igual al ancho del mheader al 100%, el ancho será del 100% de lo que configuró. Si establece el ancho en 1%, el borde será el 1% del ancho de la ventana) . Establezca el ID que corresponde a la class="HorizontalBorder" en la top:99% (Dado que está en un contenedor de encabezado, la parte superior se refiere a la posición en la que se encuentra según el encabezado. Esta + la altura debe sumr 100% si quiero que llegue al final), left:0%; y height:1% (Dado que la altura del mdiv es 5 veces mayor que la altura del encabezado [100% = 100, 20% = 20, 100/20 = 5], la altura será del 20% de lo que configuró. Si establece la altura en 1%, el borde será .2% de la altura de la ventana). Así es como se verá:

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

DESCARGO DE RESPONSABILIDAD: Si cambia el tamaño de la ventana a un tamaño lo suficientemente pequeño, los bordes desaparecerán. Una solución sería limitar el tamaño del borde si la ventana cambia de tamaño hasta cierto punto. Aquí esta lo que hice:

 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 hiciste todo bien, debería verse como está en este enlace: https://jsfiddle.net/umhgkvq8/12/ Por algún extraño motivo, el borde desaparecerá en jsfiddle pero no si lo inicias en un navegador .

Eche un vistazo a la especificación de calc () . Aquí hay un ejemplo de uso:

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