Como definir a espessura da borda em porcentagem?

85

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.

css 
— Peeyush Kushwaha
fonte
border-widthnão suporta porcentagem como valor. Você pode usar em, px, ex etc. Mas por que você deseja definir um border-widthde 10%?
— Sentencio de
2
Porcentagem de quê? Isso é essencial para encontrar uma solução alternativa. A abordagem simples está obviamente errada, uma vez que percentagens não são permitidas ali. Você provavelmente precisará configurar um elemento auxiliar e brincar com os fundos, mas os detalhes dependem da resposta à pergunta "porcentagem de quê?"
— Jukka K. Korpela de
2
porcentagem da tela. o elemento está absolutamente posicionado, então a porcentagem da tela
— Peeyush Kushwaha
@ JukkaK.Korpela: Existe um caso em que a porcentagem se refere a qualquer outra coisa além do recipiente posicionado? Por que a pergunta então?
— Robert Koritnik
@PeeyushKushwaha, tem certeza que quer dizer a tela (largura), não a largura da janela?
— Jukka K. Korpela

Respostas:

82

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>
Expandir snippet

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>
Expandir snippet

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.

— Robert Koritnik
fonte
1
problema com solução sem script: set your elements background-color to white (or whatever it needs to be)É semitransparente para mostrar a imagem de fundo, usar outro elemento irá destruir o propósito.
— Peeyush Kushwaha
@PeeyushKushwaha: De qualquer maneira, indiquei esse problema em minha resposta. É por isso que também forneci uma solução alternativa com script que não sofre com isso. Mas, dependendo do contexto, ainda pode ser possível resolver esse problema sem scripts. Mas isso depende muito da situação individual.
— Robert Koritnik
A solução sem script não funcionará se você precisar de transparência no conteúdo com borda (uma vez que o fundo do invólucro será mostrado).
— cmeeren
1
Outro problema com a solução sem script: cores de borda diferentes não são possíveis (por exemplo border-left-color: green)
— Aloso
Eu já havia pensado em uma solução como a sua antes. Eu não sabia se a div com fundo e preenchimento com outra alternativa interna era tão boa. Agora parece validar isso. No meu caso, é exatamente o que eu precisava.
— cram2208
37

Você também pode usar

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

OU 

border: 9vw solid #F5E5D6;
— Ajmal Jamil
fonte
6
Esta é a única solução aqui que é remotamente razoável.
— serraosays
1
Não foi isso que OP perguntou. OP quer uma borda na porcentagem do elemento atual, não na porcentagem da janela de visualização.
— autra
2
@autra, isso é exatamente o que o OP perguntou: "Eu quero que o elemento cubra toda a janela do navegador".
— Qwertiy
Oh certo, ok. É porque o OP realmente fez a pergunta errada sobre seu problema, supondo que definir a borda em porcentagem fosse a única solução para seu problema específico. Eu fui enganado por isso, desculpe :-)
— autra
1
é a melhor resposta!
— Damien Romito de
24

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/

— Kimberly Fox
fonte
2
Isso é útil quando você não se preocupa com a largura da borda e apenas em cobrir a tela inteira, mas não de outra forma.
— Peeyush Kushwaha
2
isso é o que ele estava pedindo originalmente - cobrindo toda a tela, mas incluindo a largura de uma borda. Você pode alterar a largura da borda aqui para qualquer quantidade de pixels e isso não afetará suas larguras de porcentagem div.
— Kimberly Fox
4
Eu estava tentando dizer que esta solução aborda um dos problemas da pergunta original, que é cobrir a tela inteira sem transbordar. Mas isso não é útil quando você deseja definir sua borda em termos de porcentagem da largura / altura da tela
— Peeyush Kushwaha
Esta é uma ótima solução e abordagem, obrigado Kimberly! Realmente ajudou a sombrear o exterior de um elemento onde o interior era transparente.
— Travis J
4

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.

— BoltClock
fonte
@Robert Koritnik: Exatamente :) Eu senti que precisava esclarecer isso em minha resposta, então eu editei agora ...
— BoltClock
@Robert: Talvez eu tente ... e se necessário, reverterei.
— BoltClock
4

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 */
— Sbutterworth
fonte
6
em é uma porcentagem, mas é relativa ao tamanho da fonte, não à altura ou largura da caixa / elemento que o contém.
— realizado em
Em arredondado para pixels completos, pelo menos para mim.
— aksu
4

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.

— robocat
fonte
2

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

— David Genger
fonte
0

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 .

— Bradley William Elko
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.