How to set border s thickness in percentages

Question

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

User · Answer

Take a look at calc   specification  Here is an example of usage   border-right 1px solid  border-left 1px solid  width calc 100  - 2px

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

You can also use  border-left  9vw solid  F5E5D6  border-right  9vw solid  F5E5D6         OR   border  9vw solid  F5E5D6

User · Answer

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    lt html gt       lt body gt           lt div class  mdiv  gt               lt span class  VerticalBorder  id  Span1  gt  lt  span gt               lt header class  mheader  gt                   lt span class  HorizontalBorder  id  Span2  gt  lt  span gt               lt  header gt           lt  div gt       lt  body gt   lt  html gt    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  lt   800          Span1 style width    4            if  WindowHeight  lt   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

User · Answer

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

User · Answer

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            lt border-width gt    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    set wrapper element s background-color to your desired border colour set wrapper element s padding in percentages  because they re supported  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   x000D   x000D   faux-borders   x000D      background-color   f00  x000D      padding  1px 25      set padding to simulate border    x000D    x000D   content   x000D      background-color   fff  x000D    x000D   lt div class  faux-borders  gt  x000D       lt div class  content  gt  x000D          This is the element to have percentage borders  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    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    x000D   x000D  var el       content    x000D  var w   el width     4   0     calculate  amp  trim decimals x000D  el css  border-width    1px     w    px    x000D   content   border  1px solid  f00    x000D   lt div class  content  gt  x000D      This is the element to have percentage borders  x000D   lt  div gt  x000D   x000D   x000D    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

User · Answer

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

[css] How to set border's thickness in percentages?

Examples related to css