css - redondear - poner un borde en html

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

Question

¿Cómo establecer el ancho del borde de un elemento en porcentajes? Intenté la sintaxis

 border-width:10%;

Pero no funciona.

Editar:

El motivo por el que quiero establecer el ancho del borde en porcentajes es porque tengo un elemento con width: 80%; y height:80%; , y quiero que el elemento cubra toda la ventana del navegador, por lo que quiero establecer todos los bordes 10%. No estoy haciendo esto con el método de 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 posicionar un elemento detrás de él afectaría su transparencia.

Sé que esto se puede hacer a través de JavaScript, pero estoy buscando un método de solo CSS, si es posible.

Answer 1

El borde no admite porcentaje ... pero aún es posible ...

Como otros han señalado la especificación de CSS , los porcentajes no son compatibles con 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 puede ver , dice Porcentajes: N / A.

Solución sin guión

Puede simular los bordes de su porcentaje con un elemento contenedor donde:

1. establecer el background-color de background-color del elemento de envoltura en el background-color de borde deseado
2. establecer el padding del elemento de envoltura en porcentajes (porque son compatibles)
3. establece tus elementos background-color en blanco (o lo que sea)

Esto de alguna manera simularía sus fronteras porcentuales. Aquí hay un ejemplo de un elemento con bordes laterales de 25% de ancho que usa esta técnica.

HTML utilizado 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>

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 de antepasados. Pero si su UI es lo suficientemente simple, puede hacerlo de esta manera.

Solución guionizada

@BoltClock mencionó la solución guionizada donde puede calcular programáticamente el ancho del borde de acuerdo con el tamaño del elemento.

Este es un ejemplo con 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>

Pero debe tener en cuenta que deberá ajustar el ancho del borde cada vez que cambie el tamaño de su contenedor (es decir, 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 guionizada es que no sufre problemas de fondo mencionados en mi solución previa sin guiones.

Answer 2

Así que esta es una pregunta más antigua, pero para aquellos que aún están buscando 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 de la 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/

Answer 3

Eche un vistazo a la especificación de calc () . Aquí hay un ejemplo de uso:

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

Answer 4

Los valores porcentuales no son aplicables al border-width en CSS. Esto se enumera en la spec .

Tendrá que usar JavaScript para calcular el porcentaje del ancho del elemento o la cantidad de longitud que necesite, y aplicar el resultado en px o similar a los bordes del elemento.

Answer 5

Puede hacer un borde personalizado usando un tramo. Haz un lapso 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, acceda a su CSS y configure la clase en la position:absolute , height:100% (para bordes verticales), width:100% (para bordes horizontales), margin:0% y background-color:#000000; . Agrega todo lo 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" al top:0%; , left:0%; , width:1%; (Dado que el ancho del mdiv es igual al ancho del mheader al 100%, el ancho será del 100% de lo que configuró. Si establece el ancho en 1%, el borde será el 1% del ancho de la ventana) . Establezca el ID que corresponde a la class="HorizontalBorder" en la top:99% (Dado que está en un contenedor de encabezado, la parte superior se refiere a la posición en la que se encuentra según el encabezado. Esta + la altura debe sumar 100% si quiero que llegue al final), left:0%; y height:1% (Dado que la altura del mdiv es 5 veces mayor que la altura del encabezado [100% = 100, 20% = 20, 100/20 = 5], la altura será del 20% de lo que configuró. Si establece la altura en 1%, el borde será .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 la ventana cambia de tamaño 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 hiciste todo bien, debería verse como está en este enlace: https://jsfiddle.net/umhgkvq8/12/ Por algún extraño motivo, el borde desaparecerá en jsfiddle pero no si lo inicias en un navegador .

Answer 6

Puedes 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 */

Answer 7

Los navegadores modernos admiten unidades vh y vw , que son un porcentaje de la ventana de la ventana.

Para que pueda tener bordes de CSS puro 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; puede ser útil también

Answer 8

Tamaño de la caja
establecer el tamaño de la caja en el cuadro de la frontera tamaño de la box-sizing: border-box; y configure el ancho al 100% y un ancho fijo para el borde, luego agregue un ancho mínimo para que, en una pantalla pequeña, el borde no supere toda la pantalla

Answer 9

También puedes usar

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

O

border: 9vw solid #F5E5D6;