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

85

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

css 
— Peeyush Kushwaha
fuente
border-widthno admite el porcentaje como valor. Puede usar em, px, ex, etc. Pero, ¿por qué quiere establecer un border-width10%?
— Sentencio
2
¿Porcentaje de qué? Esto es esencial para encontrar una solución. El enfoque simple es obviamente incorrecto, ya que no se permiten porcentajes allí. Probablemente necesitará configurar un elemento auxiliar y jugar con los fondos, pero los detalles dependen de la respuesta a la pregunta "¿porcentaje de qué?"
— Jukka K. Korpela
2
porcentaje de pantalla. el elemento está absolutamente posicionado, por lo que porcentaje de pantalla
— Peeyush Kushwaha
@ JukkaK.Korpela: ¿Hay algún caso en el que el porcentaje se refiera a algo más que al contenedor posicionado? Entonces, ¿por qué la pregunta?
— Robert Koritnik
@PeeyushKushwaha, ¿estás seguro de que te refieres a la pantalla (ancho), no al ancho de la ventana?
— Jukka K. Korpela

Respuestas:

82

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

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

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.

— Robert Koritnik
fuente
1
Problema con la solución sin guión: set your elements background-color to white (or whatever it needs to be)es semitransparente para mostrar la imagen de fondo, el uso de otro elemento destruirá el propósito.
— Peeyush Kushwaha
@PeeyushKushwaha: De todos modos, señalé este problema en mi respuesta. Es por eso que también proporcioné una solución alternativa con script que no sufre de esto. Pero dependiendo de los antecedentes, aún podría ser posible resolver este problema sin secuencias de comandos. Pero esto depende enormemente de la situación individual.
— Robert Koritnik
La solución sin secuencia de comandos no funcionará si necesita transparencia en el contenido delimitado (ya que el fondo del contenedor se mostrará).
— cmeeren
1
Otro problema con la solución sin guión: no son posibles diferentes colores de borde (por ejemplo border-left-color: green)
— Aloso
De alguna manera había pensado en una solución como la suya antes. No sabía si el div con fondo y relleno con otro div dentro de la alternativa era tan bueno. Ahora parece validarlo. En mi caso, es exactamente lo que necesitaba.
— cram2208
37

También puedes usar

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

O 

border: 9vw solid #F5E5D6;
— Ajmal Jamil
fuente
6
Esta es la única solución aquí que es remotamente razonable.
— serraosays
1
Sin embargo, esto no es lo que pidió OP. OP quiere un borde en el porcentaje del elemento actual, no en el porcentaje de la ventana gráfica.
— autra
2
@autra, eso es exactamente lo que OP preguntó: "Quiero que el elemento cubra toda la ventana del navegador".
— Qwertiy
Oh cierto, ok. Es porque OP en realidad hizo la pregunta incorrecta sobre su problema, ya que suponía que establecer el borde en porcentaje era la única solución a su problema particular.
— Eso
1
es la mejor respuesta!
— Damien Romito
24

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/

— Kimberly fox
fuente
2
Esto es útil cuando no le importa el ancho del borde y solo cubre la pantalla completa, pero no de otra manera.
— Peeyush Kushwaha
2
eso es lo que estaba pidiendo originalmente: cubrir toda la pantalla, pero incluyendo el ancho de un borde. Puede cambiar el ancho del borde aquí a cualquier cantidad de píxeles y no alterará sus anchos de porcentaje div.
— Kimberly Fox
4
Estaba tratando de decir que esta solución aborda uno de los problemas de la pregunta original, que cubre toda la pantalla sin desbordamiento. Pero esto no es útil cuando desea establecer su borde en términos de porcentaje de ancho / alto de la pantalla
— Peeyush Kushwaha
Esta es una gran solución y enfoque, ¡gracias Kimberly! Realmente ayudó a sombrear el exterior de un elemento donde el interior era transparente.
— Travis J
4

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.

— BoltClock
fuente
@Robert Koritnik: Exactamente :) Sentí que necesitaba aclarar eso en mi respuesta, así que lo he editado ahora ...
— BoltClock
@Robert: Tal vez lo intente ... y si es necesario lo revertiré.
— BoltClock
4

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 */
— sbutterworth
fuente
6
em es un porcentaje, pero es relativo al tamaño de la fuente, no al alto o ancho del cuadro / elemento que lo contiene.
— efreed
Em se redondea a píxeles completos al menos para mí.
— aksu
4

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.

— robocat
fuente
2

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

— David Genger
fuente
0

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 .

— Bradley William Elko
fuente
-2

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);
— ilgice
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.