How Can I Create Percentage-Based Borders in CSS?

How to Set Border Thickness in Percentages?

Setting border widths using percentages is not directly supported in CSS. However, you can simulate this behavior using a combination of CSS techniques.

You can wrap the element you want to add borders to in a wrapper element with the following properties:

• Set the wrapper element's background-color to the desired border color.


• Set the wrapper element's padding in percentages to simulate the border width.


• Set the background color of the inner element to the desired color within the border.

This technique creates the illusion of border percentages by using padding and background colors.

Example Code

<br>.faux-borders {<br>  background-color: #f00;<br>  padding: 1px 25%; /<em> Simulate a 25% border on the sides </em>/<br>}</p>
<p>.content {<br>  background-color: #fff;<br>}</p>
<p><div>  <div class="content"></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">This element has simulated percentage borders.

Copy after login