How to Create a inner border for a box in html?
See this picture:
This question is related to
html
css
border
css-shapes
The answer is
Please have a look
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.box{ width:500px; height:200px; background:#000; border:2px solid #ccc;}
.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>
<div class="box inner-border inner-outline"></div>
</body>
</html>
_x000D_
_x000D_
_x000D_
_x000D_
.blackBox {_x000D_
width: 100%;_x000D_
height: 200px;_x000D_
background-color: #000;_x000D_
position: relative;_x000D_
color: cyan;_x000D_
padding: 20px;_x000D_
box-sizing: border-box;_x000D_
}_x000D_
_x000D_
.blackBox::before {_x000D_
position: absolute;_x000D_
border: 1px dotted #fff;_x000D_
left: 10px;_x000D_
right: 10px;_x000D_
top: 10px;_x000D_
bottom: 10px;_x000D_
content: "";_x000D_
}<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
</head>_x000D_
<body>_x000D_
_x000D_
<div class="blackBox">Created an inner border box. <br> Working fine all major browsers.</div>_x000D_
_x000D_
</body>_x000D_
</html>- Use
dashedborder style for outline. - Draw
background-colorwith:beforeor:afterpseudo element.
Note: This method will allow you to have maximum browser support.
Output Image:
_x000D_
_x000D_
_x000D_
_x000D_
* {box-sizing: border-box;}_x000D_
_x000D_
.box {_x000D_
border: 1px dashed #fff;_x000D_
position: relative;_x000D_
height: 160px;_x000D_
width: 350px;_x000D_
margin: 20px;_x000D_
}_x000D_
_x000D_
.box:before {_x000D_
position: absolute;_x000D_
background: black;_x000D_
content: '';_x000D_
bottom: -10px;_x000D_
right: -10px;_x000D_
left: -10px;_x000D_
top: -10px;_x000D_
z-index: -1;_x000D_
}<div class="box">_x000D_
_x000D_
</div>Take a look at this , we can simply do this with outline-offset property
Output image look like
_x000D_
_x000D_
_x000D_
_x000D_
.black_box {_x000D_
width:500px;_x000D_
height:200px;_x000D_
background:#000;_x000D_
float:left;_x000D_
border:2px solid #000;_x000D_
outline: 1px dashed #fff;_x000D_
outline-offset: -10px;_x000D_
}<div class="black_box"></div>IE doesn't support outline-offset so another solution would be to create 2 div tags, one nested into the other one. The inner one would have a border and be slightly smaller than the container.
_x000D_
_x000D_
_x000D_
_x000D_
.container {_x000D_
position: relative;_x000D_
overflow: hidden;_x000D_
width: 400px;_x000D_
height: 100px;_x000D_
background: #000000;_x000D_
padding: 10px;_x000D_
}_x000D_
.inner {_x000D_
position: relative;_x000D_
overflow: hidden;_x000D_
width: 100%;_x000D_
height: 100%;_x000D_
background: #000000;_x000D_
border: 1px dashed #ffffff;_x000D_
}<div class="container">_x000D_
<div class="inner"></div>_x000D_
</div>You may also use box-shadow and add transparency to that dashed border via background-clip to let you see body background.
example
_x000D_
_x000D_
_x000D_
_x000D_
h1 {_x000D_
text-align: center;_x000D_
margin: auto;_x000D_
box-shadow: 0 0 0 5px #1761A2;_x000D_
border: dashed 3px #1761A2;_x000D_
background: linear-gradient(#1761A2, #1761A2) no-repeat;_x000D_
background-clip: border-box;_x000D_
font-size: 2.5em;_x000D_
text-shadow: 0 0 2px white, 0 0 2px white, 0 0 2px white, 0 0 2px white, 0 0 2px white;_x000D_
font-size: 2.5em;_x000D_
min-width: 12em;_x000D_
}_x000D_
body {_x000D_
background: linear-gradient(to bottom left, yellow, gray, tomato, purple, lime, yellow, gray, tomato, purple, lime, yellow, gray, tomato, purple, lime);_x000D_
height: 100vh;_x000D_
margin: 0;_x000D_
display: flex;_x000D_
}_x000D_
::first-line {_x000D_
color: white;_x000D_
text-transform: uppercase;_x000D_
font-size: 0.7em;_x000D_
text-shadow: 0 0_x000D_
}_x000D_
code {_x000D_
color: tomato;_x000D_
text-transform: uppercase;_x000D_
text-shadow: 0 0;_x000D_
}_x000D_
em {_x000D_
mix-blend-mode: screen;_x000D_
text-shadow: 0 0 2px white, 0 0 2px white, 0 0 2px white, 0 0 2px white, 0 0 2px white_x000D_
}<h1>transparent dashed border<br/>_x000D_
<em>with</em> <code>background-clip</code>_x000D_
</h1>render in firefox:
Html:
<div class="outerDiv">
<div class="innerDiv">Content</div>
</div>
CSS:
.outerDiv{
background: #000;
padding: 10px;
}
.innerDiv{
border: 2px dashed #fff;
min-height: 200px; //adding min-height as there is no content inside
}
Source: Stackoverflow.com