I have a div that contains some text and the div has a background color. I would like a border around the div but I would like it so that there is 1px of white between the div and the border on all sides. Is this possible?
I've tried to use border: 3px double #000; but unfortunately this did not have the desired effect. The border ended up inside the div and the space between the two borders was the same colour as the background of the div.
I hope I have explained my query clearly. Thanks in advance for any help.
You can achieve this by using the CSS3 box-shadow property and setting the spread and blur to low values. Check it out at http://www.sitepoint.com/css3-multiple-borders/
I'd recommend going with the css3 technique but if you do need to support older browsers such as ie8/7/6 then just have a div wrapped around another element.
.box {border:1px solid red;}
.box > div {padding:2px;}
<div class="box">
<div>Hello</div>
</div>
How about wrapping the div within antoher div? Something like...
<div style='background-color: white; padding: 1px; border: 1px solid black;'>
<div style='background-color: yellow;'>my text stuff goes here</div>
</div>
if you have to support only modern browser you can use CSS3 and define multiple borders on the same element with images or solid colours, otherwise styling :after or :before pseudoelements:
see
http://tnels.com/2010/09/13/multiple-borders-in-css3/
http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
Related
I'm adding a black border on images with a blue background and while doing so, it appears to add an ever so noticeable background colored outline on the INSIDE of the border when doing so. Is there a way to get rid of this? The code I'm using is simple:
border-radius: 100%;
border: 3px solid rgb(0, 0, 0);
And you can see the background color edging in by adding a radius to any image, as an example:
There are several ways to avoid that annoying border-radius background bleed:
Method 1: Wrapper with Background Color
Put the <img> in a wrapper element, and add padding to the wrapper, with a background color that matches the <img>'s border. This way, any antialiasing that happens on the image will take into account the background color of the wrapper, rather than the background color of the page.
Method 2: Add Background Color to Image
Add a background color to your <img> that matches the border color. It'll use the <img>'s background color instead of the page background color to do the antialiasing.
Method 3: Use Padding Instead
Don't bother with a border. Add padding to your <img> equal to the border size you want, and add a background color in the border color you want. This gets you the same effect with the least amount of code.
Here's a JSFiddle with each of these methods: https://jsfiddle.net/4zpL98au/14/
#stvnrynlds gave an interesting answer and I wanted to test this out myself with actual code.
I have created a snippet below with both versions for comparison.
.test1 - uses padding with a wrapper instead of a border
.test2 - uses border only
.test1{
border-radius: 50%;
width:50px;
height: 50px;
padding:5px;
background:black;
}
.test1 img{
border-radius:50%;
}
.test2 img{
border-radius: 50%;
border: 5px solid black;
}
<div class="test1"><img src="http://i.imgur.com/4LM6DpN.gif"/></div>
<div class="test2"><img src="http://i.imgur.com/4LM6DpN.gif"/></div>
Zooming in 500% into the browser you can see the end results:
There's a quite simple solution for this problemen, just by adding a background color:
background:#000;
border-radius: 100%;
border: 3px solid #000;
How can I achieve that the text inside a div has the same padding-top in Firefox and in Chrome? In Firefox it has apadding-top of in this case 3px by default and Chrome only has 2px.
js fiddle
HTML
<div class="wrap">
<div class="content">Hello World</div>
</div>
CSS
.wrap{
border: 1px solid;
background: lightblue;
height: 50px;
width: 120px;
font-family: sans-serif;
}
If you want to vertical align text inside the div.
Refer the question to get your answer Vertically align text in a div
DEMO
You have 50px height in your div. So just simple give line-height:50px; property to your class. If you increase your height of your div , then increase you line-height as well.
If you want the align the text to center, then add the text-align:center;.
You simply need to set the text's leading with the CSS line-height property. Different browsers will likely have different defaults.
http://jsfiddle.net/vJB4F/2/
Do you use a reset css ?
See http://www.cssreset.com/, and test with.
The different browsers and their cores are using different default settings in the html code.
THe simplest solution is to use every time a reset css code.
That code must be included just before your code and will rearrange all the differences you may find further.
A reset css example
I'm trying to make a border for the top of a div element. The border is a 1px thick solid line, and it is to make a noticeable division between the footer and the website content. However, I don't want the border to span the whole width of the footer. I'd instead like it to be shorter (by maybe 10 pixels or so on each side) and centered. How should I do this? Does it require me to use an image?
You mean something like this: http://jsfiddle.net/8ZSSc/
Or, if you always wanted exactly 10px short of each side regardless of page size:
http://jsfiddle.net/8ZSSc/2/
Just use the <hr /> tag to make a horizontal line, and set the width for that.
I guess you are looking for something like this:
<div style="width: 95%; border-top: 1px solid; margin: auto;"></div>
Add another div above the footer, add a top border, and use padding to make it narrower:
.footer-line {
border-top: ...
margin-right: 10px;
margin-left: 10px;
}
You could have another very skinny div, just above the footer.
Site: is here
picture html:
<img alt="" src="UserFiles/Image/galerie/12970854473D-Eco-60.jpg">
when I add border: 2px solid black; to the image
layout breaks...
The only straight-forward solution to your problem that I can see is
outline: 2px solid black
which is layout neutral. However, it doesn't work in IE < 8.
For the record, an alternative:
border: 2px solid black;
margin:-2px;
First you add 2px to all sides, and then you pull them back in with the negative margin.
You can use CSS Clip, and apply the border around the clipped image;
I tried using margin: -2px, but it did not work for me.
Warning, CSS clip is pretty counter intuitive, and while it shares the a similar shorthand for margin and padding, it's pixel value assignments are extremely different compared to margin or padding.
Here are some helpful links;
Covers outline, and negative margin fix
http://css-tricks.com/2368-image-rollover-borders-that-do-not-change-layout/
CSS Clip
http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html
I have a div which has style properties as "border-top, left, right, bottom" set.
But I do not want the border top to complete the box (which would be a rectangle). I want a small (About 2-3px) opening at the top right (on the length side of the box).
How can this be done?
I think there is a property in CSS called "border-top-width" but there is no "border-top-length".
Can it be done using CSS? Any other approaches are also welcome.
Thanks...
I don't think that's possible...The only way I can think of is to hack it with creating another element inside it (1px wide, 3px high), float it right, and then do margin-right: -1px...
<div style="border:1px solid black; background-color: white;">
<div id="borderHack"></div>
Your content here
</div>
And style the "hack" element like so:
#borderHack {
float: right;
margin-right: 1px;
background-color: white; /*This would have to be the same as the background*/
height: 3px;
width: 1px;
}
You will have to set border-top to none and then put another DIV into that container DIV. Then set the inner DIV's border-top and set it's width to be smaller than the container's.
I don't believe you can do this with CSS alone.
You could add an inner div that has the background color of the color you want at the opening. You would then position and size the inner element so that it appears to be a gap.
You can do that using what's explained in this link http://www.css3.info/preview/border-image/
Basically what you would do is draw a box without the top corners and assign it as border-image
Edit: But this is only available in CSS3 and not implemented by many browsers so for now the other answers give a practical solution.
You might as well try this (relative+absolute positioning) almost the same with float:
<div style="width:400px;height:300px;border-top:1px solid black; border-right:1px solid black;border-bottom:1px solid black;position:relative;">
some content here
<div style="width:2px;height:3px;position:absolute;right:0;background:gray;"></div>
</div>