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
What Characters Are Allowed in Dom Ids
Is Autocomplete="Off" Compatible With All Modern Browsers
:After and :Before CSS Pseudo Elements Hack For Internet Explorer 7
Limit Scope of External CSS to Only a Specific Element
How to Delete an Item or Object from an Array Using Ng-Click
Matching the First/Nth Element of a Certain Type in the Entire Document
How to Create Custom Tags For Html
How to Center Text Vertically With a Large Font-Awesome Icon
Are Single Quotes Allowed in Html
How to Make Html5 Video Fullscreen
Add Centered Text to the Middle of a Horizontal Rule
Why Is a Div With "Display: Table-Cell;" Not Affected by Margin
Heights Rendering Differently in Chrome and Firefox