Como definir a espessura da borda em porcentagens?

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

border-width:10%; 

Mas isso não funciona.

Editar:

o motivo que eu quero definir a largura da borda em porcentagens é porque eu tenho um elemento com width: 80%; e height:80%; , e eu quero que o elemento cubra toda a janela do navegador, então eu quero definir todas as fronteiras em 10%. Eu não estou fazendo isso com o método de 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.

Fronteira não suporta porcentagem … mas ainda é possível …

Como outros apontaram para a especificação CSS , os percentuais não são suportados nas bordas:

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

Solução sem script

Você pode simular suas bordas de porcentagem com um elemento de wrapper onde você faria:

  1. defina a background-color de background-color do elemento wrapper para a background-color borda desejada
  2. definir o padding do elemento wrapper em porcentagens (porque elas são suportadas)
  3. definir seus elementos background-color de fundo para branco (ou o que for necessário)

Isso de alguma forma simularia suas bordas percentuais. Veja um exemplo de um elemento com bordas laterais de largura de 25% 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; } 
 
This is the element to have percentage borders.

Então essa é uma pergunta antiga, mas para aqueles que ainda estão procurando uma resposta, a propriedade CSS Box-Sizing é inestimável 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 para uma porcentagem e qualquer borda adicionada à div será incluída nessa porcentagem. Então, por exemplo, o seguinte adicionaria a borda de 1px ao lado de dentro da largura da div:

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

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

Você também pode usar

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

OU

 border: 9vw solid #F5E5D6; 

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 valores percentuais não são aplicáveis ​​à border-width no CSS. Isso está listado na especificação .

Você precisará usar JavaScript para calcular a porcentagem da largura do elemento ou a quantidade de comprimento necessária e aplicar o resultado em px ou semelhante às bordas do elemento.

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

Assim, você pode ter limites de CSS puros como uma porcentagem do tamanho da janela:

 border: 5vw solid red; 

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

Tamanho da checkbox
defina o tamanho da checkbox para o tamanho da checkbox da 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 uma pequena canvas a borda não ultrapasse a canvas inteira

Você pode criar uma borda personalizada usando um intervalo. Faça um intervalo com uma class (especificando a direção na qual a borda está indo) e um id:

   

Em seguida, vá para o CSS e defina a class como position:absolute , height:100% (para bordas verticais), width:100% (para bordas horizontais), margin:0% e background-color:#000000; . Adicione tudo o que é 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 o top:0%; à left:0%; width:1%; (Como a largura do mdiv é igual à largura do mheader em 100%, a largura será 100% do que você definiu. Se você definir a largura como 1%, a borda será de 1% da largura da janela) . Defina o id que corresponde à class="HorizontalBorder" para o top:99% (Como está em um contêiner de header, o topo se refere à posição em que ele está de acordo com o header. Essa + a altura deve sumr 100% se você quer que ele chegue ao fundo), à left:0%; e height:1% (como a altura do mdiv é 5 vezes maior que a altura do mheader [100% = 100, 20% = 20, 100/20 = 5], a altura será de 20% do que você definiu. Se você definir a altura como 1%, a borda será 0,2% da altura da janela). Aqui está como vai ficar:

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

AVISO LEGAL: Se você resize a janela para um tamanho pequeno o suficiente, as bordas desaparecerão. Uma solução seria limitar o tamanho da borda se a janela fosse 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 parecer como é neste link: https://jsfiddle.net/umhgkvq8/12/ Por algum motivo estranho, a fronteira irá desaparecer em 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);