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:
Example
Try this code »<!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:
- How to add border to an element on mouse hover without affecting the layout in CSS
- How to remove dotted line around the links using CSS
- How to remove outline around text input boxes in chrome using CSS
- How to create triangle or caret icons using CSS
Advertisements
