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

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

border-width:10%;

Pero no funciona.

La razón por la que quiero establecer border-widthporcentajes es que tengo un elemento con width: 80%;y height: 80%;, y quiero que el elemento cubra toda la ventana del navegador, así que quiero establecer todos los bordes al 10%. No estoy haciendo esto con el método de los 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 colocar un elemento detrás afectaría su transparencia.

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

Border no admite porcentaje ... pero aún es posible ...

Como otros han señalado a la especificación CSS , los porcentajes no se admiten en las fronteras:

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

Como se puede ver que dice Porcentajes: N / A .

Solución sin script

Puede simular sus bordes de porcentaje con un elemento de envoltura en el que:

1. establezca el elemento de envoltura background-coloren el color de borde deseado
2. establecer los elementos de envoltura paddingen porcentajes (porque son compatibles)
3. establece tus elementos background-coloren blanco (o lo que sea necesario)

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

HTML usado en el ejemplo

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

Problema: debe tener en cuenta que esto será mucho más complicado cuando su elemento tenga un fondo complejo aplicado ... especialmente si ese fondo se hereda de la jerarquía DOM ancestral. Pero si su interfaz de usuario es lo suficientemente simple, puede hacerlo de esta manera.

Solución con guión

@BoltClock mencionó una solución con script en la que puede calcular el ancho del borde mediante programación según el tamaño del elemento.

Este es un ejemplo con un script extremadamente simple usando 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>

Pero debe tener en cuenta que tendrá que ajustar el ancho del borde cada vez que cambie el tamaño de su contenedor (es decir, cambiar el tamaño de la ventana del navegador). Mi primera solución con el elemento contenedor parece mucho más simple porque ajustará automáticamente el ancho en estas situaciones.

El lado positivo de la solución con script es que no sufre de los problemas de fondo mencionados en mi solución anterior sin script.

También puedes usar

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

O

border: 9vw solid #F5E5D6;

Entonces, esta es una pregunta anterior, pero para aquellos que aún buscan 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 del 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/

Los valores porcentuales no se aplican a border-widthCSS. Esto se enumera en la especificación .

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

Puede 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 navegadores modernos admiten unidades vh y vw , que son un porcentaje de la ventana gráfica.

Por lo tanto, puede tener bordes CSS puros 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;también puede ser útil.

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

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

<html>
    <body>
        <div class="mdiv">
            <span class="VerticalBorder" id="Span1"></span>
            <header class="mheader">
                <span class="HorizontalBorder" id="Span2"></span>
            </header>
        </div>
    </body>
</html>

Luego, vaya a su CSS y configure la clase en position:absolute, height:100%(Para bordes verticales), width:100%(Para bordes horizontales) margin:0%y background-color:#000000;. Agregue todo lo demás 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"a top:0%;, left:0%;, width:1%;(ya que la anchura de la MDiv es igual a la anchura de la mheader al 100%, la anchura será del 100% de lo que lo ajusta. Si se establece el ancho a 1% el el borde será el 1% del ancho de la ventana). Establezca la identificación que corresponde al class="HorizontalBorder"to top:99%(ya que está en un contenedor de encabezado, la parte superior se refiere a la posición en la que se encuentra de acuerdo con el encabezado. Esto + la altura debe sumar 100% si desea que llegue al final), left:0%;y height:1%(Dado que la altura del mdiv es 5 veces mayor que la altura del mheader [100% = 100, 20% = 20, 100/20 = 5], la altura será el 20% de lo que estableciste. Si estableces la altura al 1% el borde será el 0,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 se cambia el tamaño de la ventana 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 hizo todo bien, debería verse como está en este enlace: https://jsfiddle.net/umhgkvq8/12/ Por alguna extraña razón, el borde desaparecerá en jsfiddle pero no si lo inicia en un navegador .

Eche un vistazo a la especificación calc () . A continuación, se muestra un ejemplo de uso:

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