Related
I have two divs, and I want them to "look like" surrounded by same border. can anyone help me solving this problem?
I would like it to look like
_____
|top |
| |__
|bottom |
| |
─────────
PS. the way I tried is to add border-bottom : white in ``#top` div.
However, it becomes more complicated because the #bottom div I need it style to include position: absolute yet the #top div not have position: absolute.
Here is the html.
<div id='top'>
top
</div>
<div id='bottom'>
bottom
</div>
Here is the css
#top{
width : 100px;
height : 100px;
border : solid 1px black;
border-bottom : solid 3px white;
position : relative;
z-index : 1000;
}
#bottom{
width : 200px;
height : 200px;
border : solid 1px black;
position : absolute;
}
Here is jsfiddle if you need
http://jsfiddle.net/willHsu/T3bLq/
thanks for your help!
Just let them overlap for a bit.
Something like this: http://jsfiddle.net/T3bLq/2/
.box {
position: relative;
}
#top{
width : 100px;
height : 100px;
border : solid 1px black;
border-bottom : solid 3px white;
position : absolute;
z-index : 1000;
}
#bottom{
top: 102px;
width : 200px;
height : 200px;
border : solid 1px black;
position : absolute;
}
<div class="box">
<div id='top'>
top
</div>
<div id='bottom'>
bottom
</div>
Another solution, try with before selector:
#top {
width : 100px;
height : 100px;
border : solid 1px black;
border-bottom : none;
background:#FFF;
}
#bottom {
width: 200px;
height: 200px;
border: solid 1px black;
border-top: none;
}
#bottom:before{
content: "";
display:block;
margin-left: 100px;
border-top: solid 1px black;
}
http://jsfiddle.net/sagix/vTyeS/
Working from Milkmannetje's solution, you can give the bottom div a top margin of 100 pixels instead of an absolute position.
Because of margin collapsing, the top one then ends up in the same place as the bottom one, so I had to move the top one up by 100 pixels.
#top{
width : 100px;
height : 100px;
border : solid 1px black;
border-bottom : none;
position : absolute;
top:-100px;
background:#FFF;
}
#bottom{
width : 200px;
height : 200px;
border : solid 1px black;
margin-top:108px;
}
http://jsfiddle.net/MrLister/T3bLq/4/
Alternatively, if you don't want to use position: absolute at all, you can give the top one display:relative (because that is to only way to position it higher in the Z-index) and use margin-top: -1px for the bottom one.
http://jsfiddle.net/MrLister/T3bLq/7/
Or, another approach, if you want to avoid position altogether, is to switch the divs around in the source. That will also make the top one be displayed on top of the bottom one, without relying on the Z-index. then give the bottom one a large top margin, and the top one a large negative top margin to get them back in the same place on the screen again.
http://jsfiddle.net/MrLister/T3bLq/8/
I would not recommend this course of action though; it's confusing. Use something like this only as a last resort.
I'm trying to get text to be on top (or in front of) a CSS shape. It works with border-bottom, but not with border-top (which is what I need it to look like).
I am assuming that because the border-top property is set that it's pushing the text below the shape.
Not too sure how to get it to work correctly without having to use an image. I could have swore I've seen this done before, but I can't remember where.
Here's my fiddle: http://jsfiddle.net/ultraloveninja/W2SPd/
<h1>the trap</h1>
h1 {
border-top: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
You need 2 elements and 2 CSS styles. One for the text, and one for the background:
<h1><div>the trap</div></h1>
CSS
h1 {
border-top: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
h1 div {
position: relative;
top: -100px;
}
http://jsfiddle.net/vPt7h/
You can insert a span tag for the text and get:
h1 {
border-top: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
position:relative;
}
h1 span {
position: absolute;
top: -100px;
}
Demo http://jsfiddle.net/W2SPd/10/
Feasible?
Simply create a new pseudo element :after and then style the pseudo element with the border styles instead :)
The advantages? You don't have to create new elements just for the style alone, or use unnecessary nesting/wrapping with no semantic meaning; and it is not an image-based solution. The drawback - requires browser support for pseudo elements, so may not work on old versions of IE... but that's not something you should worry about.
h1 {
width: 100px;
padding: 0 50px; /* To account for the left and right borders in pseudo element to ensure it lines up */
}
h1:after {
content: " ";
display: block;
position: absolute;
top: 0;
left: 0;
border-top: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
z-index: -1; /* Displays pseudo element behind text */
width: 100px;
}
See fiddle here - http://jsfiddle.net/teddyrised/W2SPd/11/
That's really a bad way to do it imo. It will still take up more space than needed and you're asking for potential problems down the road. Yes you can use the examples others have provided but if it were me, I would make the shape an image and use it as a background via CSS.
.myShape { background:url(/pathto/your/image.png); width:150px; height:100px; }
I have a <div> element and I want to put a border on it. I know I can write style="border: 1px solid black", but this adds 2px to either side of the div, which is not what I want.
I would rather have this border be -1px from the edge of the div. The div itself is 100px x 100px, and if I add a border, then I have to do some mathematics to make the border appear.
Is there any way that I can make the border appear, and ensure the box will still be 100px (including the border)?
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>
It works on IE8 & above.
You can also use box-shadow like this:
div{
-webkit-box-shadow:inset 0px 0px 0px 10px #f00;
-moz-box-shadow:inset 0px 0px 0px 10px #f00;
box-shadow:inset 0px 0px 0px 10px #f00;
}
Example here: http://jsfiddle.net/nVyXS/ (hover to view border)
This works in modern browsers only. For example: No IE 8 support.
See caniuse.com (box-shadow feature) for more info.
Probably it is belated answer, but I want to share with my findings. I found 2 new approaches to this problem that I have not found here in the answers:
Inner border through box-shadow css property
Yes, box-shadow is used to add box-shadows to the elements. But you can specify inset shadow, that would look like a inner border rather like a shadow. You just need to set horizontal and vertical shadows to 0px, and the "spread" property of the box-shadow to the width of the border you want to have. So for the 'inner' border of 10px you would write the following:
div{
width:100px;
height:100px;
background-color:yellow;
box-shadow:0px 0px 0px 10px black inset;
margin-bottom:20px;
}
Here is jsFiddle example that illustrates the difference between box-shadow border and 'normal' border. This way your border and the box width are of total 100px including the border.
More about box-shadow:here
Border through outline css property
Here is another approach, but this way the border would be outside of the box. Here is an example.
As follows from the example, you can use css outline property, to set the border that does not affect the width and height of the element. This way, the border width is not added to the width of an element.
div{
width:100px;
height:100px;
background-color:yellow;
outline:10px solid black;
}
More about outline: here
Yahoo! This is really possible. I found it.
For Bottom Border:
div {box-shadow: 0px -3px 0px red inset; }
For Top Border:
div {box-shadow: 0px 3px 0px red inset; }
You can use the properties outline and outline-offset with a negative value instead of using a regular border, works for me:
div{
height: 100px;
width: 100px;
background-color: grey;
margin-bottom: 10px;
}
div#border{
border: 2px solid red;
}
div#outline{
outline: 2px solid red;
outline-offset: -2px;
}
Using a regular border.
<div id="border"></div>
Using outline and outline-offset.
<div id="outline"></div>
Although this question has already been adequately answered with solutions using the box-shadow and outline properties, I would like to slightly expand on this
for all those who have landed here (like myself) searching for a solution for an inner border with an offset
So let's say you have a black 100px x 100px div and you need to inset it with a white border - which has an inner offset of 5px (say) - this can still be done with the above properties.
box-shadow
The trick here is to know that multiple box-shadows are allowed, where the first shadow is on top and subsequent shadows have lower z-ordering.
With that knowledge, the box-shadow declaration will be:
box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white;
div {
width: 100px;
height: 100px;
background: black;
box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white;
}
<div></div>
Basically, what that declaration is saying is: render the last (10px white) shadow first, then render the previous 5px black shadow above it.
outline with outline-offset
For the same effect as above the outline declarations would be:
outline: 5px solid white;
outline-offset: -10px;
div {
width: 100px;
height: 100px;
background: black;
outline: 5px solid white;
outline-offset: -10px;
}
<div></div>
NB: outline-offset isn't supported by IE if that's important to you.
Codepen demo
Use pseudo element:
.button {
background: #333;
color: #fff;
float: left;
padding: 20px;
margin: 20px;
position: relative;
}
.button::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 5px solid #f00;
}
<div class='button'>Hello</div>
Using ::after you are styling the virtual last child of the selected element. content property creates an anonymous replaced element.
We are containing the pseudo element using absolute position relative to the parent. Then you have freedom to have whatever custom background and/or border in the background of your main element.
This approach does not affect placement of the contents of the main element, which is different from using box-sizing: border-box;.
Consider this example:
.parent {
width: 200px;
}
.button {
background: #333;
color: #fff;
padding: 20px;
border: 5px solid #f00;
border-left-width: 20px;
box-sizing: border-box;
}
<div class='parent'>
<div class='button'>Hello</div>
</div>
Here .button width is constrained using the parent element. Setting the border-left-width adjusts the content-box size and thus the position of the text.
.parent {
width: 200px;
}
.button {
background: #333;
color: #fff;
padding: 20px;
position: relative;
}
.button::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 5px solid #f00;
border-left-width: 20px;
}
<div class='parent'>
<div class='button'>Hello</div>
</div>
Using the pseudo-element approach does not affect the content-box size.
Depending on the application, approach using a pseudo-element might or might not be a desirable behaviour.
I know this is somewhat older, but since the keywords "border inside" landed me directly here, I would like to share some findings that may be worth mentioning here.
When I was adding a border on the hover state, i got the effects that OP is talking about. The border ads pixels to the dimension of the box which made it jumpy.
There is two more ways one can deal with this that also work for IE7.
1)
Have a border already attached to the element and simply change the color. This way the mathematics are already included.
div {
width:100px;
height:100px;
background-color: #aaa;
border: 2px solid #aaa; /* notice the solid */
}
div:hover {
border: 2px dashed #666;
}
2 )
Compensate your border with a negative margin. This will still add the extra pixels, but the positioning of the element will not be jumpy on
div {
width:100px;
height:100px;
background-color: #aaa;
}
div:hover {
margin: -2px;
border: 2px dashed #333;
}
11 Years Later but heres the answer:
Just use outline:
outline: 0.2vw solid red;
I hope i can help someone who sees this question also 11 Yeas Later.
for consistent rendering between new and older browsers, add a double container, the outer with the width, the inner with the border.
<div style="width:100px;">
<div style="border:2px solid #000;">
contents here
</div>
</div>
this is obviously only if your precise width is more important than having extra markup!
If you use box-sizing: border-box means not only border,
padding,margin, etc. All element will come inside of the parent
element.
div p {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 150px;
height:100%;
border: 20px solid #f00;
background-color: #00f;
color:#fff;
padding: 10px;
}
<div>
<p>It was popularised in the 1960s with the release of Letraset sheets</p>
</div>
Best cross browser solution (mostly for IE support) like #Steve said is to make a div 98px in width and height than add a border 1px around it, or you could make a background image for div 100x100 px and draw a border on it.
You can look at outline with offset but this needs some padding to exists on your div. Or you can absolutely position a border div inside, something like
<div id='parentDiv' style='position:relative'>
<div id='parentDivsContent'></div>
<div id='fakeBordersDiv'
style='position: absolute;width: 100%;
height: 100%;
z-index: 2;
border: 2px solid;
border-radius: 2px;'/>
</div>
You might need to fiddle with margins on the fake borders div to fit it as you like.
A more modern solution might be to use css variables and calc. calc is widely supported but variables is not yet in IE11 (polyfills available).
:root {
box-width: 100px;
border-width: 1px;
}
#box {
width: calc(var(--box-width) - var(--border-width));
}
Although this does use some calculations, which the original questions was looking to avoid. I think this is an ok time to use calculations as they are controlled by the css itself. It also has no need for additional markup or misappropriating other css properties that may be needed later on.
This solution is only really useful if a fixed height isn't needed.
One solution I didn't see mentioned above is the case where you have padding on your input, which I do 99% of the time. You can do something along the lines of...
input {
padding: 8px;
}
input.invalid {
border: 2px solid red;
padding: 6px; // 8px - border or "calc(8px - 2px)"
}
What I like about this is that I have the full menu of border + padding + transition properties for each side.
I have following code
div {
width: 200px;
border-bottom: 1px solid magenta;
height: 50px;
}
<div></div>
The div width is 200px so border-bottom is also 200px but what should I do if I want border-bottom only 100px without changing div width?
You can use pseudoelements. E.g.
div {
width : 200px;
height : 50px;
position: relative;
z-index : 1;
background: #eee;
}
div:before {
content : "";
position: absolute;
left : 0;
bottom : 0;
height : 1px;
width : 50%; /* or 100px */
border-bottom:1px solid magenta;
}
<div>Item 1</div>
<div>Item 2</div>
No need to use extra markup for presentational purpose. :after is also supported from IE8.
edit:
if you need a right-aligned border, just change left: 0 with right: 0
if you need a center-aligned border just simply set left: 50px;
Another way to do this (in modern browsers) is with a negative spread box-shadow. Check out this updated fiddle: http://jsfiddle.net/WuZat/290/
box-shadow: 0px 24px 3px -24px magenta;
I think the safest and most compatible way is the accepted answer above, though. Just thought I'd share another technique.
I added line under under h3 tag like this
<h3 class="home_title">Your title here</h3>
.home_title{
display:block;
}
.home_title::after {
display:block;
clear:both;
content : "";
position: relative;
left : 0;
bottom : 0;
max-width:250px;
height : 1px;
width : 50%; /* or 100px */
border-bottom:1px solid #e2000f;
margin:0 auto;
padding:4px 0px;
}
You can use a linear gradient:
div {
width:100px;
height:50px;
display:block;
background-image: linear-gradient(to right, #000 1px, rgba(255,255,255,0) 1px), linear-gradient(to left, #000 0.1rem, rgba(255,255,255,0) 1px);
background-position: bottom;
background-size: 100% 25px;
background-repeat: no-repeat;
border-bottom: 1px solid #000;
border-top: 1px solid red;
}
<div></div>
You cannot have a different sized border than the div itself.
the solution would be to just add another div under neath, centered or absolute positioned, with the desired 1pixel border and only 1pixel in height.
http://jsfiddle.net/WuZat/3/
I left the original border in so you can see the width, and have two examples -- one with 100 width, and the other with 100 width centered. Delete the one you dont wish to use.
Late to the party but for anyone who wants to make 2 borders (on the bottom and right in my case) you can use the technique in the accepted answer and add an :after psuedo-element for the second line then just change the properties like so:
http://jsfiddle.net/oeaL9fsm/
div
{
width:500px;
height:500px;
position: relative;
z-index : 1;
}
div:before {
content : "";
position: absolute;
left : 25%;
bottom : 0;
height : 1px;
width : 50%;
border-bottom:1px solid magenta;
}
div:after {
content : "";
position: absolute;
right : 0;
bottom : 25%;
height : 50%;
width : 1px;
border-right:1px solid magenta;
}
I did something like this in my project. I would like to share it here. You can add another div as a child and give it a border with small width and place it left, centre or right with usual CSS
HTML code:
<div>
content
<div class ="ac-brdr"></div>
</div>
CSS as below:
.active {
color: magneta;
}
.active .ac-brdr {
width: 20px;
margin: 0 auto;
border-bottom: 1px solid magneta;
}
This will help:
http://www.w3schools.com/tags/att_hr_width.asp
<hr width="50%">
This creates a horizontal line with a width of 50%, you would need to create/modify the class if you would like to edit the style.
I have case to have some bottom border between pictures in div container and the best one line code was - border-bottom-style: inset;
div{
font-size: 25px;
line-height: 27px;
display:inline-block;
width:200px;
text-align:center;
}
div::after {
background: #f1991b none repeat scroll 0 0;
content: "";
display: block;
height: 3px;
margin-top: 15px;
width: 100px;
margin:auto;
}
The border is given the whole html element. If you want half bottom border, you can wrap it with some other identifiable block like span.
HTML code:
<div> <span>content here </span></div>
CSS as below:
div{
width:200px;
height:50px;
}
span{
width:100px;
border-bottom:1px solid magenta;
}
I just accomplished the opposite of this using :after and ::after because I needed to make my bottom border exactly 1.3rem wider:
My element got super deformed when I used :before and :after at the same time because the elements are horizontally aligned with display: flex, flex-direction: row and align-items: center.
You could use this for making something wider or narrower, or probably any mathematical dimension mods:
a.nav_link-active {
color: $e1-red;
margin-top: 3.7rem;
}
a.nav_link-active:visited {
color: $e1-red;
}
a.nav_link-active:after {
content: '';
margin-top: 3.3rem; // margin and height should
height: 0.4rem; // add up to active link margin
background: $e1-red;
margin-left: -$nav-spacer-margin;
display: block;
}
a.nav_link-active::after {
content: '';
margin-top: 3.3rem; // margin and height should
height: 0.4rem; // add up to active link margin
background: $e1-red;
margin-right: -$nav-spacer-margin;
display: block;
}
Sorry, this is SCSS, just multiply the numbers by 10 and change the variables with some normal values.
Border right length smaller than parent div
with pseudo-elements
#import url(https://fonts.googleapis.com/css?family=Raleway);
body{
font-family: 'Raleway', sans-serif;
}
div {
width : 200px;
height : 50px;
position: relative;
z-index : 1;
background-color: #f5f5f5;
margin: 20px auto;
padding: 20px;
color:#726E97;
}
div:before {
content : "";
position: absolute;
right : 0;
top : 25%;
height : 50px;
width : 50%;
border-right:5px solid #726E97;
}
<div>BOX 1</div>
Can I specify a border like 1px solid color1/color2. for the situation if I have to put a border like the image attached. I know I can put this border as an image, but I am looking if this can be be done in pure css.
You can also achieve the effect of multiple borders on an element with the pseude elements :before and :after.
See this page for examples http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/demo/borders.html
Here is ja demo using this technice (only top border as you described it): http://jsfiddle.net/m7g6L/
div {
border-top: 3px solid #00f;
position: relative;
z-index: 10;
margin: 10px;
width: 200px;
}
div:before {
content: "";
border-top: 1px solid #f00;
position: absolute;
top: 0;
left: 0;
right:0;
z-index: -1;
}
Try this. Enclose the element within a div, then use the div to achieve the desired effect by eliminating the margin and border from the div, like this:
<div style="border-top: solid red 2px; margin: none; padding: 0px;">
<p style="margin-top: 0px; border-top: solid blue 2px;">This is a paragraph.Blah Blah
Blah Blah</p>
</div>
It worked when I tried it out.
Yes, use outline:.
Fair warning: it might mess the focus with some elements.
Example
you could use multiple elements and play with the padding and backgrounds:
http://jsfiddle.net/SJFx4/
not exactly semantic but it works -- you could use pseudo elements to achieve the same effect
Strictly speaking, CSS does not support multiple borders as far as I know.
Nonetheless, you can visually acheive the desired effect by combining an ordinary border with an outline:
#myElement {
border: solid 2px blue;
outline: solid 2px red;
}
If you need the outer "border" to appear only on one side, for example top, then the simplest solution is to use an enclosing div element:
div .borderHelper {
border-top: solid 2px red;
margin: none;
padding: 0;
}
#myElement {
border-top: solid 2px blue;
}