103

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.

6
  • border-width doesn't support percentage as value. You can use em, px, ex etc. But why you want to set a border-width of 10%?
    – Sentencio
    Nov 20, 2012 at 13:57
  • 2
    Percentage of what? This is essential for finding a workaround. The simple approach is obviously wrong, since percentages are not allowed there. You will probably need to set up an auxiliary element and play with backgrounds, but the details depend on the answer to the question “percentage of what?” Nov 20, 2012 at 14:15
  • 2
    percentage of screen. the element is absolutely positioned, so percentage of screen Nov 20, 2012 at 14:26
  • @JukkaK.Korpela: Is there a case when percentage is referring to anything else than positioned container? Why the question then? Nov 20, 2012 at 14:41
  • @PeeyushKushwaha, are you sure you mean the screen (width), not the window width? Nov 20, 2012 at 14:45

10 Answers 10

90

Border doesn't support percentage... but it's still possible...

As others have pointed to CSS specification, percentages aren't supported on borders:

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

As you can see it says Percentages: N/A.

Non-scripted solution

You can simulate your percentage borders with a wrapper element where you would:

  1. set wrapper element's background-color to your desired border colour
  2. set wrapper element's padding in percentages (because they're supported)
  3. set your elements background-color to white (or whatever it needs to be)

This would somehow simulate your percentage borders. Here's an example of an element with 25% width side borders that uses this technique.

HTML used in the example

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

Issue: You have to be aware that this will be much more complicated when your element has some complex background applied to it... Especially if that background is inherited from ancestor DOM hierarchy. But if your UI is simple enough, you can do it this way.

Scripted solution

@BoltClock mentioned scripted solution where you can programmaticaly calculate border width according to element size.

This is such an example with extremely simple script using 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>

But you have to be aware that you will have to adjust border width every time your container size changes (i.e. browser window resize). My first workaround with wrapper element seems much simpler because it will automatically adjust width in these situations.

The positive side of scripted solution is that it doesn't suffer from background problems mentioned in my previous non-scripted solution.

8
  • 1
    problem with non-scripted solution: set your elements background-color to white (or whatever it needs to be) It is semi-transparent so as to show the background image, using another element will destroy the purpose. Nov 21, 2012 at 9:29
  • @PeeyushKushwaha: I've pointed out this issue in my answer anyway. That's why I also provided alternative scripted solution which doesn't suffer from this. But depending on the background it could still be possible to resolve this issue without scripting. But this hugely depends on the individual situation. Nov 21, 2012 at 11:25
  • The non-scripted solution will not work if you need transparency on the bordered content (since the wrapper background will show through).
    – cmeeren
    Jul 21, 2015 at 21:57
  • 1
    Another issue with the non-scripted solution: different border colors aren't possible (e.g. border-left-color: green)
    – Aloso
    Jun 10, 2016 at 19:12
  • I had somehow thought about a solution like yours before. I didn't know if the div with background and padding with another div inside alternative was that good. Now it seems to validate it. In my case, it is exactly what I needed.
    – cram2208
    Feb 7, 2018 at 9:41
44

You can also use

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

OR

border: 9vw solid #F5E5D6;
5
  • 9
    This is only solution on here that is remotely reasonable.
    – serraosays
    Jun 6, 2017 at 14:28
  • 5
    This is not what OP asked though. OP wants a border in the current element percentage, not in viewport percentage.
    – autra
    Mar 8, 2019 at 10:50
  • 3
    @autra, that's exactly what OP asked: "I want the element to cover the whole browser window".
    – Qwertiy
    Mar 30, 2019 at 21:29
  • Oh right, ok. It's because OP actually asked the wrong question about their issue, already supposing setting border in percent was the only solution to their particular problem. I was fooled by that, sorry :-)
    – autra
    Apr 1, 2019 at 7:53
  • 1
    it's the best answer ! Oct 20, 2019 at 6:33
27

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/

4
  • 2
    This is useful when you don't care about the border-width and only about covering the full screen, but not otherwise. May 27, 2014 at 7:08
  • 3
    that's what he was asking for originally - covering the whole screen, but including a width of a border. You can change the border width here to any pixel amount and it won't throw off your div percentage widths. May 27, 2014 at 18:19
  • 5
    I was trying to say that this solution addresses one of the problems in the original question, that is covering the whole screen without overflow. But this is not helpful when you want to set your border in terms of percentage of screen width/height Jun 9, 2014 at 16:12
  • This is a great solution and approach, thanks Kimberly! Really helped shading the outside of an element where the inside was transparent.
    – Travis J
    Dec 1, 2019 at 20:20
5

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 */
2
  • 10
    em is a percentage, but it is relative to the font size, not the height or width of the containing box/element.
    – efreed
    Jan 12, 2016 at 20:17
  • Em rounds to full pixels at least for me.
    – aksu
    Jul 30, 2016 at 20:33
4

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.

2
  • @Robert Koritnik: Exactly :) I felt I needed to clarify that in my answer so I've edited it now...
    – BoltClock
    Nov 20, 2012 at 14:04
  • @Robert: Maybe I'll give it a try... and if necessary I'll roll it back.
    – BoltClock
    Nov 20, 2012 at 14:06
4

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.

3

[As of 2023] I solved this with container query units (cqmin in particular)

border: 0.5cqmin solid black;

This sets the border to 0.5% of the width or height of the container (whichever is smaller).

cqmin: The smaller value of either cqi or cqb https://www.w3.org/TR/css-contain-3/#container-lengths

cqb: A measurement in the block dimension: refers to the physical height (vertical dimension) in horizontal writing modes, and to the physical width (horizontal dimension) in vertical writing modes. https://www.w3.org/TR/css-writing-modes-4/#block-size

cqi: A measurement in the inline dimension: refers to the physical width (horizontal dimension) in horizontal writing modes, and to the physical height (vertical dimension) in vertical writing modes. https://www.w3.org/TR/css-writing-modes-4/#inline-size

2

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

0

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.

-2

Take a look at calc() specification. Here is an example of usage:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.