How to set border-width of an element in percentages? I tried the syntax
border-width:10%;
But it doesn't work.
The reason I want to set border-width in percentages is I have an element with width: 80%; and height: 80%;, and I want the element to cover the whole browser window, so I want to set all borders 10%. I am not doing this with the two elements method, in which one would be positioned behind the other and act as the border, because the element's background is transparent, and positioning an element behind it would affect it's transparency.
I know this can be done via JavaScript, but I am looking for an CSS only method, if possible at all.
This question is related to
css
Modern browsers support vh and vw units, which are a percentage of the window viewport.
So you can have pure CSS borders as a percentage of the window size:
border: 5vw solid red;
Try this example and change window width; the border will change thickness as the window changes size. box-sizing: border-box; may be useful too.
You can also use
border-left: 9vw solid #F5E5D6;
border-right: 9vw solid #F5E5D6;
OR
border: 9vw solid #F5E5D6;
You can use em for percentage instead of pixels,
Example:
border:10PX dotted #c1a9ff; /* In Pixels */
border:0.75em dotted #c1a9ff; /* Exact same as above in Percentage */
So this is an older question, but for those still looking for an answer, the CSS property Box-Sizing is priceless here:
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
It means that you can set the width of the Div to a percentage, and any border you add to the div will be included within that percentage. So, for example, the following would add the 1px border to the inside of the width of the div:
div { box-sizing:border-box; width:50%; border-right:1px solid #000; }
If you'd like more info: http://css-tricks.com/box-sizing/
Percentage values are not applicable to border-width in CSS. This is listed in the spec.
You will need to use JavaScript to calculate the percentage of the element's width or whatever length quantity you need, and apply the result in px or similar to the element's borders.
You can make a custom border using a span. Make a span with a class (Specifying the direction in which the border is going) and an 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>
Then, go to you CSS and set the class to position:absolute, height:100% (For Vertical Borders), width:100% (For Horizontal Borders), margin:0% and background-color:#000000;. Add everthing else that is necessary:
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;
}
Then set the id that corresponds to class="VerticalBorder" to top:0%;, left:0%;, width:1%; (Since the width of the mdiv is equal to the width of the mheader at 100%, the width will be 100% of what you set it. If you set the width to 1% the border will be 1% of the window's width). Set the id that corresponds to the class="HorizontalBorder" to top:99% (Since it's in a header container the top refers to the position it is in according to the header. This + the height should add up to 100% if you want it to reach the bottom), left:0%; and height:1%(Since the height of the mdiv is 5 times greater than the mheader height [100% = 100, 20% = 20, 100/20 = 5], the height will be 20% of what you set it. If you set the height to 1% the border will be .2% of the window's height). Here is how it will look:
span#Span1{
top:0%;
left:0%;
width:.4%;
}
span#Span2{
top:99%;
left:0%;
width:1%;
}
DISCLAIMER: If you resize the window to a small enough size, the borders will disappear. A solution would be to cap of the size of the border if the window is resized to a certain point. Here is what I did:
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;
}
}
}
If you did everything right, it should look like how it is in this link: https://jsfiddle.net/umhgkvq8/12/ For some odd reason, the the border will disappear in jsfiddle but not if you launch it to a browser.
Take a look at calc() specification. Here is an example of usage:
border-right:1px solid;
border-left:1px solid;
width:calc(100% - 2px);
Box Sizing
set the box sizing to border box box-sizing: border-box; and set the width to 100% and a fixed width for the border then add a min-width so for a small screen the border won't overtake the whole screen
Source: Stackoverflow.com