I’m sure a lot of you have had a similar problem to me.  You’re trying to make a responsive website, and you try to put a border around one of the boxes, but find that borders can’t be put in a percentage.  As an example, lets say you have three divs each with a margin separating them, like this:

<div class="responsiveBorderContainer1">
    <div class="responsiveDiv"></div>
    <div class="responsiveDiv"></div>
    <div class="responsiveDiv"></div>
</div>
<style>
.responsiveBorderContainer1 {
    width:100%; 
    height:100px; 
    background:rgb(224,127,122)
}
.responsiveBorderContainer1 .responsiveDiv {
    float:left;
    width:30.33%; 
    height:80px; 
    background:rgb(109,112,127); 
    margin:10px 1.5%
}
</style>

But if you wanted to add a border, this just doesn’t work…

<style>
.responsiveBorderContainer2 {
    width:100%; 
    height:100px; 
    background:rgb(224,127,122)
}
.responsiveBorderContainer2 .responsiveDiv {
    float:left; 
    width:30.33%; 
    height:80px; 
    background:rgb(109,112,127); 
    margin:10px 1%; 
    border:.5% solid black
}
</style>

That’s not correct CSS syntax, and the border just won’t show up. Borders need to be declared in ‘px’ or some other definite unit like ’em’… So how do you make a responsive container with a border? Here are two different ways.

Box Shadow Method

In case you don’t know, box shadows can have up to 4 values (plus a color) they are x-offset, y-offset, blur radius, and spread, and they appear in the CSS syntax in that order. If you give the box shadow a spread, but no blur radius, it looks just like a border, but doesn’t actually take up any space in the DOM. So, just change your CSS to this

<style>
.responsiveBorderContainer3 {
    width:100%; 
    height:100px; 
    background:rgb(224,127,122)
}
.responsiveBorderContainer3 .responsiveDiv {
    float:left; 
    width:30.33%; 
    height:80px; 
    background:rgb(109,112,127); 
    margin:10px 1.5%; 
    box-shadow:0 0 0 3px black
}
</style>

For this particular example there’s no blur radius, so it looks like a traditional solid border, however adding a blur radius will in most cases make the website look better.

Adding additional “border” divs

To do this, you would need to go back and edit your html a little bit to look like this

<div class="responsiveBorderContainer4">
    <div class="responsiveDiv"></div>
    <div class="line"></div>
    <div class="responsiveDiv"></div>
    <div class="line"></div>
    <div class="responsiveDiv"></div>
</div>

So we added additional divs in between each of our three main content divs, and gave them a class of “line”. Now we can change the CSS to look like this

<style>
.responsiveBorderContainer4 {
width:100%; 
height:100px; 
background:rgb(224,127,122)
}
.responsiveBorderContainer4 .responsiveDiv {
    float:left; 
    width:31.33%; 
    height:80px; 
    background:rgb(109,112,127); 
    margin:10px .83%;
}
.responsiveBorderContainer4 .line {
    width:.5%; 
    height:80px; 
    margin:10px 0; 
    float:left; 
    background:black
}
</style>

There is still a small problem however. Since this is going to be a responsive site, it’s very unlikely that you would be putting in all of the static height values I’ve been using. As the container gets narrower, it’s likely that the content will need to wrap further down the page and will take up a larger height. In most cases it will be impossible when creating your CSS to know the exact height of your “.responsiveDiv”s. But don’t worry, just a few lines of javascript will fix this.

<script>
var responsiveDiv = document.getElementsByClassName('responsiveDiv')[0].offsetHeight + "px" // Make sure you select the largest div from the array
var line = document.getElementsByClassName('line')
line[0].style.height = responsiveDiv
line[1].style.height = responsiveDiv
</script>

And there you have it. Two different ways of making fully responsive borders

What tricks have you used to make responsive borders in the past? Share in the comments below!