Placing Border Inside of Div and Not on Its Edge

Placing border inside of div and not on its edge

Set box-sizing property to border-box:

div {    box-sizing: border-box;    -moz-box-sizing: border-box;    -webkit-box-sizing: border-box;    width: 100px;    height: 100px;    border: 20px solid #f00;    background: #00f;    margin: 10px;}
div + div { border: 10px solid red;}
<div>Hello!</div><div>Hello!</div>

CSS border inside padding

Use padding, that's inside the border:

div {    box-sizing: border-box;    display: inline-block;    width: 150px;    border: 1px solid #CCC;    padding: 30px 20px;}
<div style="border: 1px solid #AAA">
<p> Hey! </p>
</div>

How to set a border on center of edge? (not outside or inside)

You can also create that layout using pseudo elements. Usage of % values will make the pseudo-element grow and shrink with the parent.

The CSS box model is meant to have border around the content. There is no way you can hack the standard box model to show content after the border starting point.

Pseudo element behind the div:

.box {  width: 150px;  height: 100px;  background: lightgray;  position: relative;  margin: 20px;}.box::before {  background: #5E5E5E;  content: " ";  display: block;  height: 120%;  left: -5%;  position: absolute;  top: -10%;  width: 10%;  z-index: -1; /* Place it behind the box */}
<div class="box"></div>

Possible to place border on inside of padding using only one div?

Try this:

#bor-outline {
width: 100px;
height: 100px;
background: grey;
border: 4px solid #292929;
outline: 4px solid #e3e3e3;
}
<div id="bor-outline">
hello
</div>

Inner border CSS - Possible

You can use an inset box-shadow. DEMO

button {
border: solid 1px #aaa;

// Adds the inner "border"
box-shadow: 0 0 1px #fff inset;

background-image: linear-gradient(to bottom, #cfcfcf 0%, #c0c0c0 100%);
padding: 20px;
border-radius: 10px;
}

If you want to set the "width" of the border you can use a fourth value. Example with 3px wide inset box-shadow:

box-shadow: 0 0 0 3px #fff inset;

More info on box-shadows, MDN

Border inside the element with space with the edge

You can use a container/wrapper around the image.

CSS

div {
position: relative;
display:inline-block;
}
div:before {
content:"";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: inset 0 0 0px 2px #fff;
z-index:1;
border: solid 10px transparent;
}

HTML

<div>
<img src="http://i.stack.imgur.com/OGZXN.png" alt="image">
</div>

DEMO HERE

Placing borders inside a div without box-sizing property nor shadows

You can do this using pseudo-elements, simply place a pseudo-element on the bottom with a background of your choice

Bottom only

.box{  width:200px;  height:100px;  background:grey;  padding-bottom:5px;  position:relative;}
.box:after{ position:absolute; content:""; bottom:0; height:5px; width:100%; background:red;}
<div class="box"></div>

top border not showing in middle div when i have 3 divs

What is happening here is, you have set your width and height in a box of position absolute, which does not affect the width and height of the parent, as a result is being cut off.

I moved the width and height to the position relative, and set the left,top,bottom on the position absolute element.

Here you go.

.po-relative {
position: relative;
border: .5px solid #cecece;
height: 176px;
width: 266px;
margin: 10px auto;
}

.po-absolute {
background-color: white;
position: absolute;
bottom: 0;
top: 0 left:0 right:0 transition: 250ms ease-in-out;
}

.po-absolute:hover {
background-color: black;
opacity: 20%;
}
<div>
<a class="text-decoration-none" href="">
<div class="po-relative mb-2">
<img src="images/lukas-blazek-GnvurwJsKaY-unsplash.jpg" alt="Sample Image"class="img-fluid">
<div class="po-absolute">
</div>
</div>
</a>
</div>
<div>
<a class="text-decoration-none" href="">
<div class="po-relative mb-2">
<img src="images/lukas-blazek-GnvurwJsKaY-unsplash.jpg" alt="Sample Image"class="img-fluid">
<div class="po-absolute">
</div>
</div>
</a>
</div>
<div>
<a class="text-decoration-none" href="">
<div class="po-relative mb-2">
<img src="images/lukas-blazek-GnvurwJsKaY-unsplash.jpg" alt="Sample Image"class="img-fluid">
<div class="po-absolute">
</div>
</div>
</a>
</div>

The border goes all the way to the right

Add width: min-content; to your .dinnars class. I would also delete the top and bottom attributes. They are unnecessarily restricting your sizing.

Also, get rid of the top left attributes.

*{
padding: 0;
margin: 0;
box-sizing: inherit;
box-sizing: border-box;
}


body {
font-size: 15pt;
// width: 480px;
// height: 500px;
}

#kilograms {
position: relative;
// top: 70px;
// left: 140p;
border: 20px solid crimson;
border-radius: 4px;
}
#pounds {
position: relative;
// top: 100px;
// left: 240px;
}
.dinnars {
border: 15px solid darkorchid;
width: min-content;
position: relative;
// top: 150px;
// left: 240px;
border-radius: 4px;
}

.box{
border:2px dotted green;
width: 500px;
height 500px;
}
<div class='box'>
<input type="number" placeholder="Type Weight In Kilograms" id="kilograms">
<p id="pounds">0</p>
<p id="dinnars" class="dinnars">0</p>
</div>

Inner rounded shadows inside div

  • linear gradient
  • blur filter
  • absolute positioning
  • pseudo-elements
  • flexbox

.box {
box-sizing: border-box;
border-radius: 10%;
width: 100px;
height: 100px;
background: linear-gradient(270deg, red, #c10606);
position: relative;
}

.box:before {
position: absolute;
content: '';
top: 10%;
right: 10%;
bottom: 10%;
left: 10%;
background: linear-gradient(90deg, red, #c10606);
border-radius: 12%;
filter: blur(1px); /* optional for a softer effect */
}

/* optional layout and styling for box contents */
.box {
display: flex;
align-items: center;
text-align: center;
font-family: arial;
color: #ddd;
font-weight: bold;
}

.box * {
position: relative; /* puts interior content over the pseudo-element */
}
<div class="box">
<span>Interior content</span>
</div>


Related Topics



Leave a reply



Submit