Come impostare lo spessore del bordo in percentuale?

Come impostare la larghezza del bordo di un elemento in percentuale? Ho provato la sintassi

border-width:10%;

Ma non funziona.

Il motivo per cui voglio impostare le border-widthpercentuali è che ho un elemento con width: 80%;e height: 80%;, e voglio che l'elemento copra l'intera finestra del browser, quindi voglio impostare tutti i bordi al 10%. Non lo sto facendo con il metodo dei due elementi, in cui uno sarebbe posizionato dietro l'altro e fungerebbe da bordo, perché lo sfondo dell'elemento è trasparente e il posizionamento di un elemento dietro di esso influirebbe sulla sua trasparenza.

So che questo può essere fatto tramite JavaScript, ma sto cercando un metodo solo CSS, se possibile.

Border non supporta la percentuale ... ma è ancora possibile ...

Come altri hanno indicato le specifiche CSS , le percentuali non sono supportate sui bordi:

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

Come si può vedere si dice Percentuali: N / A .

Soluzione senza script

Puoi simulare i tuoi bordi percentuali con un elemento wrapper dove vorresti:

1. imposta l'elemento wrapper background-colorsul colore del bordo desiderato
2. imposta gli elementi wrapper paddingin percentuale (perché sono supportati)
3. imposta i tuoi elementi background-colorsu bianco (o qualunque cosa debba essere)

Questo in qualche modo simulerebbe i tuoi confini percentuali. Ecco un esempio di un elemento con bordi laterali di larghezza del 25% che utilizza questa tecnica.

HTML utilizzato nell'esempio

.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: devi essere consapevole che questo sarà molto più complicato quando al tuo elemento è applicato uno sfondo complesso ... Soprattutto se quello sfondo viene ereditato dalla gerarchia DOM del predecessore. Ma se la tua interfaccia utente è abbastanza semplice, puoi farlo in questo modo.

Soluzione con script

@BoltClock ha menzionato la soluzione con script in cui è possibile calcolare programmaticamente la larghezza del bordo in base alla dimensione dell'elemento.

Questo è un esempio di questo tipo con uno script estremamente semplice che utilizza 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>

Ma devi essere consapevole che dovrai regolare la larghezza del bordo ogni volta che la dimensione del contenitore cambia (ad es. Ridimensionamento della finestra del browser). La mia prima soluzione con l'elemento wrapper sembra molto più semplice perché regolerà automaticamente la larghezza in queste situazioni.

Il lato positivo della soluzione con script è che non soffre dei problemi di background menzionati nella mia precedente soluzione senza script.

Puoi anche usare

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

O

border: 9vw solid #F5E5D6;

Quindi questa è una vecchia domanda, ma per chi è ancora alla ricerca di una risposta, la proprietà CSS Box-Sizing non ha prezzo qui:

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

Significa che puoi impostare la larghezza del div su una percentuale e qualsiasi bordo che aggiungi al div verrà incluso all'interno di quella percentuale. Quindi, ad esempio, quanto segue aggiungerebbe il bordo di 1px all'interno della larghezza del div:

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

Se desideri maggiori informazioni: http://css-tricks.com/box-sizing/

I valori percentuali non sono applicabili a border-widthin CSS. Questo è elencato nelle specifiche .

Sarà necessario utilizzare JavaScript per calcolare la percentuale della larghezza dell'elemento o qualsiasi quantità di lunghezza necessaria e applicare il risultato in pxo in modo simile ai bordi dell'elemento.

Puoi usarli per la percentuale invece dei pixel,

Esempio:

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

I browser moderni supportano le unità vh e vw , che sono una percentuale del riquadro di visualizzazione della finestra.

Quindi puoi avere bordi CSS puri come percentuale della dimensione della finestra:

border: 5vw solid red;

Prova questo esempio e cambia la larghezza della finestra; il bordo cambierà spessore man mano che la finestra cambia dimensione. box-sizing: border-box;può essere utile anche.

Dimensionamento riquadro
imposta il ridimensionamento del riquadro sul riquadro del bordo box-sizing: border-box;e imposta la larghezza al 100% e una larghezza fissa per il bordo, quindi aggiungi una larghezza minima in modo che per uno schermo piccolo il bordo non superi l'intero schermo

Puoi creare un bordo personalizzato utilizzando un'estensione. Crea uno span con una classe (specificando la direzione in cui sta andando il confine) e un 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>

Quindi, vai al tuo CSS e imposta la classe su position:absolute, height:100%(Per bordi verticali), width:100%(Per bordi orizzontali) margin:0%e background-color:#000000;. Aggiungi tutto il necessario:

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

Quindi impostare l'id che corrisponde class="VerticalBorder"a top:0%;, left:0%;, width:1%;(Poiché la larghezza della MDIV è uguale alla larghezza della mheader al 100%, la larghezza saranno 100% di quello di impostarlo. Se si imposta una larghezza di 1% della bordo sarà l'1% della larghezza della finestra). Imposta l'id che corrisponde a class="HorizontalBorder"a top:99%(Dato che è in un contenitore di intestazione, la parte superiore si riferisce alla posizione in cui si trova in base all'intestazione. Questo + l'altezza dovrebbe aggiungere fino al 100% se vuoi che raggiunga il fondo), left:0%;e height:1%(Poiché l'altezza di mdiv è 5 volte maggiore dell'altezza di mheader [100% = 100, 20% = 20, 100/20 = 5], l'altezza sarà il 20% di ciò che hai impostato. Se imposti l'altezza all'1% il bordo sarà lo 0,2% dell'altezza della finestra). Ecco come apparirà:

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

NOTA BENE: se ridimensionate la finestra a una dimensione sufficientemente piccola, i bordi scompariranno. Una soluzione potrebbe essere quella di limitare la dimensione del bordo se la finestra viene ridimensionata fino a un certo punto. Ecco cosa ho fatto:

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 hai fatto tutto bene, dovrebbe apparire come è in questo link: https://jsfiddle.net/umhgkvq8/12/ Per qualche strano motivo, il bordo scomparirà in jsfiddle ma non se lo avvii su un browser .

Dai un'occhiata alle specifiche calc () . Ecco un esempio di utilizzo:

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