Q:

How to place border inside of a div element using CSS

mhmadesk
Save to bookmark
|
2022-05-17
|
  668 
Very Easy
0

How to place border inside of a div element using CSS

Css programming,
login and add your own answer to this question

All Answers

mhmadesk
2022-05-17
need an explanation for this answer? contact us directly to get an explanation for this 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>Example of Drawing 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>

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now