Como definir a espessura da borda em porcentagem?

Como definir a largura da borda de um elemento em porcentagens? Eu tentei a sintaxe

border-width:10%;

Mas não funciona.

O motivo pelo qual desejo definir border-widthem porcentagens é que tenho um elemento com width: 80%;e height: 80%;e desejo que o elemento cubra toda a janela do navegador, portanto, desejo definir todas as bordas em 10%. Não estou fazendo isso com o método dos dois elementos, no qual um seria posicionado atrás do outro e atuaria como a borda, porque o fundo do elemento é transparente, e posicionar um elemento atrás dele afetaria sua transparência.

Eu sei que isso pode ser feito via JavaScript, mas estou procurando um método somente CSS, se possível.

Borda não suporta porcentagem ... mas ainda é possível ...

Como outros apontaram para a especificação CSS , as porcentagens não são compatíveis com as bordas:

'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 você pode ver que diz Percentagens: N / A .

Solução sem script

Você pode simular suas bordas de porcentagem com um elemento de invólucro onde você:

1. defina o elemento de invólucro background-colorpara a cor de borda desejada
2. definir o elemento wrapper paddingem porcentagens (porque eles são suportados)
3. defina seus elementos background-colorpara branco (ou o que quer que seja)

De alguma forma, isso simularia suas bordas de porcentagem. Aqui está um exemplo de um elemento com bordas laterais de 25% de largura que usa essa técnica.

HTML usado no exemplo

.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: você deve estar ciente de que isso será muito mais complicado quando o seu elemento tiver algum fundo complexo aplicado a ele ... Especialmente se esse fundo for herdado da hierarquia DOM ancestral. Mas se sua IU for simples o suficiente, você pode fazer isso desta forma.

Solução com script

@BoltClock mencionou a solução com script onde você pode calcular programaticamente a largura da borda de acordo com o tamanho do elemento.

Este é um exemplo com um script extremamente simples 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>

Mas você deve estar ciente de que terá que ajustar a largura da borda sempre que o tamanho do contêiner mudar (ou seja, redimensionar a janela do navegador). Minha primeira solução alternativa com o elemento wrapper parece muito mais simples porque ele ajustará automaticamente a largura nessas situações.

O lado positivo da solução com script é que ela não sofre de problemas de segundo plano mencionados na minha solução sem script anterior.

Você também pode usar

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

OU

border: 9vw solid #F5E5D6;

Portanto, esta é uma questão mais antiga, mas para aqueles que ainda procuram uma resposta, a propriedade CSS Box-Sizing não tem preço aqui:

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

Isso significa que você pode definir a largura do Div como uma porcentagem, e qualquer borda que adicionar ao div será incluída nessa porcentagem. Assim, por exemplo, o seguinte adicionaria a borda de 1px ao interior da largura do div:

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

Se desejar mais informações: http://css-tricks.com/box-sizing/

Os valores percentuais não são aplicáveis border-widthem CSS. Isso está listado na especificação .

Você precisará usar JavaScript para calcular a porcentagem da largura do elemento ou qualquer quantidade de comprimento que você precisa e aplicar o resultado pxou similar às bordas do elemento.

Você pode usar em para porcentagem em vez de pixels,

Exemplo:

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

Os navegadores modernos suportam unidades vh e vw , que são uma porcentagem da janela de visualização.

Portanto, você pode ter bordas CSS puras como uma porcentagem do tamanho da janela:

border: 5vw solid red;

Experimente este exemplo e mude a largura da janela; a borda mudará de espessura conforme a janela muda de tamanho. box-sizing: border-box;pode ser útil também.

Tamanho
da caixa defina o tamanho da caixa para a caixa da borda box-sizing: border-box;e defina a largura para 100% e uma largura fixa para a borda, em seguida, adicione uma largura mínima para que em uma tela pequena a borda não ultrapasse a tela inteira

Você pode fazer uma borda personalizada usando uma extensão. Faça um intervalo com uma classe (especificando a direção em que a fronteira está indo) e um id:

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

Em seguida, acesse seu CSS e defina a classe como position:absolute, height:100%(Para bordas verticais), width:100%(Para bordas horizontais) margin:0%e background-color:#000000;. Adicione tudo o mais que for necessário:

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

Em seguida, defina o ID que corresponde a class="VerticalBorder"para top:0%;, left:0%;, width:1%;(Uma vez que a largura da MDiv é igual à largura da mheader em 100%, a largura será 100% do que você configurá-lo. Se você definir a largura para 1% do a borda terá 1% da largura da janela). Defina o ID que corresponde ao class="HorizontalBorder"a top:99%(Desde que é em um recipiente de cabeçalho no topo refere-se à posição que está em acordo com o cabeçalho. Esta + a altura deve somar 100%, se você quer que ele para chegar ao fundo), left:0%;e height:1%(Como a altura do mdiv é 5 vezes maior do que a altura do mheader [100% = 100, 20% = 20, 100/20 = 5], a altura será 20% do que você definiu. Se você definir a altura para 1% a borda terá 0,2% da altura da janela). É assim que vai ficar:

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

AVISO LEGAL: Se você redimensionar a janela para um tamanho pequeno o suficiente, as bordas irão desaparecer. Uma solução seria limitar o tamanho da borda se a janela for redimensionada para um determinado ponto. Aqui está o que eu fiz:

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

Se você fez tudo certo, deve ficar parecido com o que está neste link: https://jsfiddle.net/umhgkvq8/12/ Por algum motivo estranho, a borda irá desaparecer no jsfiddle, mas não se você iniciá-lo em um navegador .

Dê uma olhada na especificação calc () . Aqui está um exemplo de uso:

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