Any way to declare a size/partial border to a box?
Not really. But it's very easy to achieve the effect in a way that degrades gracefully and requires no superfluous markup:
div { width: 350px; height: 100px; background: lightgray; position: relative; margin: 20px;}
div:after { content: ''; width: 60px; height: 4px; background: gray; position: absolute; bottom: -4px;}
<div></div>
Any way to limit border length?
#mainDiv {
height: 100px;
width: 80px;
position: relative;
border-bottom: 2px solid #f51c40;
background: #3beadc;
}
#borderLeft {
border-left: 2px solid #f51c40;
position: absolute;
top: 50%;
bottom: 0;
}
<div id="mainDiv">
<div id="borderLeft"></div>
</div>
Adding line or border bottom inside the input with some width
Use background and gradient for this:
.form-control { padding: 15px 20px; border: 1px solid #000; background: linear-gradient(black, black) bottom/ /* Position */ 80% 5px /* Width height */ no-repeat;}
<input type="text" class="form-control" name="text" value="text" >
How to change the width of a CSS border independently from it's parent?
You can try using ::before and ::after
#foo {
height: 100px;
width: 100px;
background-color: red;
}
#foo::before {
border-top: 5px solid blue;
width: 80px;
height: 5px;
position: absolute;
content: '';
margin-left: calc((100px - 80px)/2);
top: 3px;
}
<div id="foo"></div>
css partial border to create 'place holder'
There is a CSS solution, but it's complicated and also requires HTML markup:
#box {
width: 200px;
height: 200px;
margin: 30px;
position: relative;
}
#box > div.corner {
display: block;
position: absolute;
width: 50px;
height: 50px;
}
.top {
top: 0px;
border-top-style: solid;
}
.bottom {
bottom: 0px;
border-bottom-style: solid;
}
.left {
left: 0px;
border-left-style: solid;
}
.right {
right: 0px;
border-right-style: solid;
}
<div id="box">
<div class="corner top left"></div>
<div class="corner top right"></div>
<div class="content">content</div>
<div class="corner bottom left"></div>
<div class="corner bottom right"></div>
</div>
DEMO
border only half the side of a div
If by adding a second div you mean no write it in the html
you can simply use the ::after
css property on your div like this:
div { width: 100px; height: 150px; background: black; position: relative;}
div::after { content: ""; position: absolute; width: 3px; right: -3px; height: 60%; background: red; top: 50%; transform: translate(-50%, -50%);}
<div></div>
Related Topics
Background Color of Text in Svg
How to Make a Div Expand Vertically to Wrap the Content Within It
How to Make Bootstrap 4 Columns Have a Height of 100%
Vuetify: Fit V-Image Within the Screen Size
How to Set the Height of Vuetify Card
How to Make an Element Fill the Remaining Viewport Height
Angular Material Mat-Drawer in Full Height Flex, Content Overflow Auto
How to Remove Border of Drop Down List:Css
Spring Boot + Thymeleaf CSS Is Not Applied to Template
Cannot Change Font Size of Text Field in Material Ui
Make Nested Div Stretch to 100% of Remaining Container Div Height
Change Button Border Color When the Button Is Being Clicked and After
Simulate Display: Inline in React Native
How to Add Fonts to Create-React-App Based Projects
Change a Html5 Input'S Placeholder Color With Css
Adjust List Style Image Position
Overflow-X:Hidden Doesn't Prevent Content from Overflowing in Mobile Browsers