WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES
Advertisements

How to place border inside of a div element using CSS

Topic: HTML / CSSPrev|Next

Answer: Use the CSS box-shadow property

If you want to place or draw the borders inside of a rectangular box there is a very simple solution — just use the CSS outline property instead of border and move it inside of the element's box using the CSS3 outline-offset property with a negative value.

However, this solution will not work for rounded corner elements. But, you can still draw borders inside a circular box or element with rounded corners using the box-shadow property with a little trick.

Let's take a look at the following example to understand how it basically works:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Setting Border inside DIV Element</title>
<style>
    .box {
        width: 180px;
        height: 180px;
        background: black;
        margin: 20px 50px;
    }
    .circle {
        border-radius: 50%;
    }
    .inner-border {
        border: 20px solid black;
        box-shadow: inset 0px 0px 0px 10px red;
        box-sizing: border-box; /* Include padding and border in element's width and height */
    }
    /* CSS3 solution only for rectangular shape */
    .inner-outline {
        outline: 10px solid red;
        outline-offset: -30px;
    }
</style>
</head> 
<body>
    <h2>Border inside Rectangular and Circular Shape</h2>
    <div class="box circle inner-border"></div>
    <div class="box inner-border"></div>
    <hr>
    <h2>Outline Inside Rectangular Shape</h2>
    <div class="box inner-outline"></div>
</body>
</html>

Related FAQ

Here are some more FAQ related to this topic:

Advertisements
Bootstrap UI Design Templates

Your Feedback:

We would love to hear from you, please drop us a line.