I want to try and achieve something in CSS using borders but they don't seem to have something I want. In Photoshop, when you add a Stroke (border), you select the position. Outside, Inside, or Center. Outside being where the entire border wraps around the object. Inside is where it sits on the inside (obviously), and center being half and half.
I want a 2px border that's positioned in the center. So it shows 1px outside and 1px inside. Is there anyway to do this with CSS? I imagine I can do it with a box-shadow of some kind but I'm horrendous at shadows in CSS.
There's also the issue of having to be pure CSS so I can't lay an image over it. Can someone possibly help me out with this.
Thanks.
There's a work around, since border represents outer stroke for you, you can make use of outline css property with outline-offset set to negative value to have the inner 1px stroke( 1 ) JS Fiddle
body {
padding-top: 10px;
}
#test {
width: 250px;
height: 200px;
background-color: orange;
margin: 0 auto;
border: 1px navy solid; /* outer stroke */
outline: 1px navy solid; /* inner stroke */
outline-offset: -2px; /* negative border width + outline width */
}
<div id="test"></div>
( 1 ) As the above fiddle might not demonstrate the explanation good enough, here's the same example with two colored strokes and 4px for each stroke instead of 1px Demo Fiddle
Resources:
http://caniuse.com/#search=outline
https://developer.mozilla.org/en/docs/Web/CSS/outline-offset
http://www.w3schools.com/cssref/css3_pr_outline-offset.asp
https://davidwalsh.name/outline-offset
Perhaps with a suitable sized absolutely positioned pseudo-element?
div {
box-sizing: border-box;
width: 200px;
height: 200px;
border: 1px solid black;
margin: 1em auto;
position: relative;
}
div:after {
content: '';
position: absolute;
top:-6px;
left: -6px;
width: calc(100% - 12px);
height: calc(100% - 12px);
border:12px solid rgba(255,0,0,0.5)
}
<div></div>
You could nudge the container so that it would look like it's an inner border. For example, if you have have a 2px left border and want it to appear as an inner border, you can just offset the whole container to the right, like this:
position: relative;
left: 2px;
You might have to do other corrections, such as reducing the width of the container by 2px.
Related
I'm trying to get a gap created within a div's border to fit an image, similar to this:
Is there a way to do this in pure CSS? All I can see is:
.box {
background: url(img.png) bottom left;
border-top: 1px solid #eee;
border-left: 1px solid #eee;
}
But my problem is border-right: 1px solid #eee; creates a line on top of my image, which is of course not desired.
It needs to be responsive. This image is an example, but you get the general idea.
Something like this?
http://jsfiddle.net/6Ufb5/
div {
border: 1px solid #ccc;
position: relative;
}
img {
position: absolute;
top: 10px;
left: 10px;
}
Give the container position relative and the img absolute, shift it to left 10px and shift it down 10px from the top and you have what you desire.
For the responsive part, that's just giving the container and/or img a % width.
Like so:
http://jsfiddle.net/6Ufb5/2/
You can achieve this by using absolute positioning of the image element - and it has to be in a <img> element, not as the background image because it will never overlap the parent border (or even if it does by adjusting the background-position property, the border will lie on top of the background image... a behavior that is expected, by the way.
<div class="box">
Content goes here
<img src="http://placehold.it/300x200" />
</div>
And the CSS:
.box {
position: relative;
border: 1px solid #333;
}
.box img {
position: absolute;
bottom: -1px;
right: -1px;
}
If you want a dynamic and/or responsive solution, you might have to resort to JS to doing so - such as resizing the image depending on the box dimensions, and assigning a height to the box to take into account of the image height (since image is absolutely positioned, it is taken out of the document flow).
See fiddle here: http://jsfiddle.net/teddyrised/xH6UV/
This might work if you can alter your markup. For accessibility I think the image should be an image and not a background, and this method is responsive (though you may want to alter margins at small sizes with media queries).
http://jsfiddle.net/isherwood/79Js5
.box {
border: 1px solid #ccc;
display: inline-block;
padding: 10px 0 10px 10px;
width: 40%;
}
.box img {
margin-right: -10%;
margin-bottom: -10%;
width: 105%;
}
<div class="box">
<img src="http://placehold.it/200x100/f3f3f3" />
</div>
I found this code snippets at http://www.css3shapes.com/, but I can't understand the logic behind it. I mean I know the before and after selector's function. What I'm confused with is why we have { height:0; width:40px; } in the code. If anyone could give a full explanation on this code, it will be greatly appreciated.
#octagon {
width: 100px;
height: 100px;
background: blue;
}
#octagon:before {
height: 0;
width: 40px;
content:"";
position: absolute;
border-bottom: 30px solid blue;
border-left: 30px solid white;
border-right: 30px solid white;
}
#octagon:after {
height: 0;
width: 40px;
content:"";
position: absolute;
border-top: 30px solid blue;
border-left: 30px solid white;
border-right: 30px solid white;
margin: 70px 0 0 0;
}
If you change a few of the colours you can see what's going on: the 'after' bit is like the top part of a bevelled picture frame:
The top of the frame is red, the sides are green & blue, but there's no bottom, and the size of the 'picture' in the frame is width 40, height zero (ie the line along the bottom edge of the red bit).
If you add the missing bottom, and make the height 40, you can see the entire frame:
It's a trick to force css to render a triangular shape. Check out #octagon:before { ... }
The border-bottom-width determines the height of the element. The borders on the sides add to the defined width giving the shape a width of 100px.
You can imagine the height: 0 acting like a vanishing point in the distance. Both of the sides move toward it but in this case never reach it since the width (100) is greater than the height 30.
The difference between the triangle and the octagon is the additional width:
width: 40px;
Play with his example: http://jsfiddle.net/mXTrG/
The gray is the side borders and the blue is the bottom border.
Does that make sense? Let me know if you have any questions!
I was just wondering if there's a way to create a div with the "border" inside the div. What I mean is: I have a div of 200px for example and I want the border to be inside that 200 pixels, without exceeding.
I need to achieve the effect of a div with a border not on the edge of the shape, but 5px more inside. An image can talk more than hundreds words
I want this:
Here is my code:
http://jsfiddle.net/hpLYD/1/
The CSS:
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
background: red;
border: 3px solid blue;
}
Padding property is expanding the whole div including the border.
How can I achieve that effect using only css? is it possible?
You can do this using the CSS3 property box-shadow. Add the following to your CSS:
box-shadow: 0px 0px 0px 5px #f00;
jsFiddle example
While box-shadow is most likely the best way to go, people seem to forget that the question required that the border didn't exceed 200px. In order to actually achieve this you can use the inset parameter on the box-shadow attribute (which will make an inner shadow).
You will also need to change the box-sizing to border-boxsuch that the size is proportional to the border and not the content.
Here's an JSFiddle with the result
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
background: red;
border: 3px solid red;
box-shadow: 0px 0px 0px 5px blue inset;
box-sizing: border-box;
}
<div class="mydiv"></div>
.mydiv{
position:relative;
height:150px;
width:200px;
background:#f00;
}
.mydiv:before{
position:absolute;
content:'';
position: absolute;
top: 10px;
bottom: 10px;
left:10px;
right: 10px;
border:1px solid #daa521;
}
Here's an JSFiddle with the result
You can't place a border within an element, however you can use box-shadow to give that effect:
.circle {
border-radius: 50%;
width: 190px;
height: 190px;
background: red;
border: 3px solid blue;
box-shadow: 0px 0px 0px 10px red; /* 10px box-shadow */
}
JSFiddle example.
Do note though that this is a CSS3 style property and isn't supported on all browsers. You may also need to use vendor-prefixes on some browsers (-webkit, -moz, etc). Check http://caniuse.com/#search=box-shadow for support.
I suppose you could add another class to the circle.
I have done this for you.
I dont think you can add a padding to a rounded border (dont quote me on that), but I did the fiddle in about 30 seconds.
.scirle {see fiddle}
http://jsfiddle.net/hpLYD/7/embedded/result/
The problem is a border takes up screen real estate whether we like it or not.
If a 1px border is on 100px element, even if we could get it to appear inside, that element would now only be 98px inside. But what we are stuck with in reality is a 100px element that's actually 102px caused by the borders on the outside. Border-box doesn't seem to do anything to borders in latest Chrome - they always appear on the outside.
An easy way to solve this is using an absolutely positioned CSS :after or :before element, this basically means no screen space is lost by the border. See example:
.border{ position: relative; }
.border{ content:''; position:absolute; left:0; right:0; top:0; bottom:0; border:1px dashed rgba(50,50,50,0.5); }
I want to be able to draw a border OUTSIDE of my Div! So if my div is say 20px by 20px, I want a 1px border outside of this (so in essence, I get a div 22x22px large).
I understand that I can just make the div 22x22 to start with, but for reasons I have, I need the borders to be on the outside.
CSS outline works, but I want only border-bottom or border-top thingy, so something like outline-bottom, which does not work, is what I want.
Is there a way to do this?
Thanks
I think you've got your understanding of the two properties off a little. Border affects the outside edge of the element, making the element different in size. Outline will not change the size or position of the element (takes up no space) and goes outside the border. From your description you want to use the border property.
Look at the simple example below in your browser:
<div style="height: 100px; width: 100px; background: black; color: white; outline: thick solid #00ff00">SOME TEXT HERE</div>
<div style="height: 100px; width: 100px; background: black; color: white; border-left: thick solid #00ff00">SOME TEXT HERE</div>
Notice how the border pushes the bottom div over, but the outline doesn't move the top div and the outline actually overlaps the bottom div.
You can read more about it here:
Border
Outline
Try the outline property CSS Outline
Outline will not interfere with widths and lenghts of the elements/divs!
Please click the link I provided at the bottom to see working demos of the the different ways you can make borders, and inner/inline borders, even ones that do not disrupt the dimensions of the element! No need to add extra divs every time, as mentioned in another answer!
You can also combine borders with outlines, and if you like, box-shadows (also shown via link)
<head>
<style type="text/css" ref="stylesheet">
div {
width:22px;
height:22px;
outline:1px solid black;
}
</style>
</head>
<div>
outlined
</div>
Usually by default, 'border:' puts the border on the outside of the width, measurement, adding to the overall dimensions, unless you use the 'inset' value:
div {border: inset solid 1px black};
But 'outline:' is an extra border outside of the border, and of course still adds extra width/length to the element.
Hope this helps
PS: I also was inspired to make this for you : Using borders, outlines, and box-shadows
IsisCode gives you a good solution. Another one is to position border div inside parent div. Check this example http://jsfiddle.net/A2tu9/
UPD: You can also use pseudo element :after (:before), in this case HTML will not be polluted with extra markup:
.my-div {
position: relative;
padding: 4px;
...
}
.my-div:after {
content: '';
position: absolute;
top: -3px;
left: -3px;
bottom: -3px;
right: -3px;
border: 1px #888 solid;
}
Demo: http://jsfiddle.net/A2tu9/191/
Why not simply using background-clip?
-webkit-background-clip: padding;
-moz-background-clip: padding;
background-clip: padding-box;
See:
http://caniuse.com/#search=background-clip
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
https://css-tricks.com/almanac/properties/b/background-clip
I shared two solutions depending on your needs:
<style type="text/css" ref="stylesheet">
.border-inside-box {
border: 1px solid black;
}
.border-inside-box-v1 {
outline: 1px solid black; /* 'border-radius' not available */
}
.border-outside-box-v2 {
box-shadow: 0 0 0 1px black; /* 'border-style' not available (dashed, solid, etc) */
}
</style>
example: https://codepen.io/danieldd/pen/gObEYKj
Way late, but I just ran into a similar issue.
My solution was pseudo elements - no additional markup, and you get to draw the border without affecting the width.
Position the pseudo element absolutely (with the main positioned relatively) and whammo.
See below, JSFiddle here.
.hello {
position: relative;
/* Styling not important */
background: black;
color: white;
padding: 20px;
width: 200px;
height: 200px;
}
.hello::before {
content: "";
position: absolute;
display: block;
top: 0;
left: -5px;
right: -5px;
bottom: 0;
border-left: 5px solid red;
border-right: 5px solid red;
z-index: -1;
}
Put your div inside another div, apply the border to the outer div with n amount of padding/margin where n is the space you want between them.
How to give border to any element using css without adding border-width to the whole width of element?
Like in Photoshop we can give stroke- Inside , center and outside
I think default css border properties is center like center in photoshop, am i right?
I want to give border inside the box not outside. and don't want to include border width in box width.
outline:1px solid white;
This won't add the extra width and height.
Check out CSS box-sizing...
The box-sizing CSS3 property can do this. The border-box value (as opposed to the content-box default) makes the final rendered box the declared width, and any border and padding cut inside the box. You can now safely declare your element to be of 100% width, including pixel-based padding and border, and accomplish your goal perfectly.
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
I'd suggest creating a mixin to handle this for you. You can find more information on box-sizing at W3c http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
Depending on your intended browser support you can use the box-shadow property.
You can set the blur value to 0 and the spread to what ever thickness you're after. The great thing about box shadow is that you can control whether it is drawn outside (by default) or inside (using the inset property).
Example:
box-shadow: 0 0 0 1px black; // Outside black border 1px
or
box-shadow: 0 0 0 1px white inset; // Inside white border 1px
One great advantage of using box shadow is you can get creative by using multiple box shadows:
box-shadow: 0 0 0 3px black, 0 0 0 1px white inset;
The only thing I can't say is what difference this will make rendering performance wise. I would assume it might become an issue if you had hundreds of elements using this technique on the screen at once.
I ran into the same issue.
.right-border {
position: relative;
}
.right-border:after {
content: '';
display: block;
position: absolute;
top: 0; right: 0;
width: 1px;
height: 100%;
background: #e0e0e0;
}
This answer allows you to specify one single side. And would work in IE8+ - unlike using box-shadow.
Of course change your pseudo elements properties as you need to single out a specific side.
* New and Improved *
&:before {
content: '';
display: block;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid #b7b7b7;
}
This allows ability to use border and hit multiple sides of a box.
Use box-sizing: border-box in order to create a border INSIDE a div without modifying div width.
Use outline to create a border OUTSIDE a div without modifying div width.
Here an example:
https://jsfiddle.net/4000cae9/1/
Notes:
border-box currently it is not supported by IE
Support:
http://caniuse.com/#feat=outline
http://caniuse.com/#search=border-box
#test, #test2 {
width: 100px;
height:100px;
background-color:yellow;
}
#test {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 10px dashed blue;
}
#test2 {
outline: 10px dashed red;
}
<p>Use box-sizing: border-box to create a border INSIDE a div without modifying div width.</p>
<div id="test">border-box</div>
<p>Use outline to create a border OUTSIDE a div without modifying div width.</p>
<div id="test2">outline</div>
As abenson said, you can use an outline but one gotcha is that Opera might draw a "non-rectangular shape". Another option that seems to work is to use negative margins, such as this css:
div {
float:left;
width: 50%;
border:1px solid black;
margin: -1px;
}
With this html:
<body>
<div>A block</div>
<div>Another block</div>
</body>
One other less clean option is to add extra markup to the html. For example, you set the width of an outer element and add the border to the inner one. The CSS:
.outer { width: 50%; float: left;}
.inner { border: 1px solid black; }
And the html:
<body>
<div class="outer">
<div class="inner">A block</div>
</div>
<div class="outer">
<div class="inner">Another block</div>
<div>
</body>
Use padding when there is no border. Remove padding when there is a border.
.myDiv {
width: 100px;
height: 100px;
padding-left: 2px;
padding-right: 2px;
}
.myDiv:hover {
padding-left: 0;
padding-right: 0;
border-left: 2px solid red;
border-right: 2px solid red;
}
Essentially, just replace the 2px padding with 2px borders. Div size remains the same.
Usually, layout shifting is the problem.
If you don't need border-radius then outline: 1px solid black; works.
If you do, make the border transparent and change its color when it's supposedto show:
/* RELEVANT */
.my-div {
border-radius: 8px;
border: 2px solid transparent;
}
.my-div:hover {
border: 2px solid #ffffffa8;
}
/* NOT RELEVANT */
.pretty {
color: white;
padding: 10px 20px;
background: #0077b6;
font-size: 16px;
transition: border .15s ease-out;
cursor:pointer;
}
<button class="pretty my-div">
Button
</button>
In your case can you fudge it by subtracting half the border from the padding? (-2.5 from the padding if your border is 5px wide, you can't have negative padding so to go smaller reduce the overall width of the box). You can add an extra 2.5px to the margin to keep the overall box the same size.
I really don't like this suggestion, but I don't think there is a way do handle this cleanly.
Thus, you're trying to achieve the same as the well known IE box model bug? That's not possible. Or you want to support clients with IE on Windows only and choose a doctype which forces IE into quirksmode.
Another option, if your background color is solid:
body { background-color: #FFF; }
.myDiv {
width: 100px;
height: 100px;
border: 3px solid #FFF; // Border is essentially invisible since background is also #FFF;
}
.myDiv:hover {
border-color: blue; // Just change the border color
}
outline:3px solid black || border:3px solid black
div{
height:50px;
width:150px;
text-align:center;
}
div{ /*this is what you need ! */
outline:1px solid black
}
<div>
hello world
</div>