I got another tricky CSS3 situation that I'm breaking my head on. I'm styleing a form with CSS to have a 10px border on the sides and a 12px border on the bottom, in combination with a 15px border radius.
Unfortunately, the point where the 12px and the 10px borders meet the transition is not gradual but there's a 2px chunk sticking out of the inside of the border. Example (sizes magnified for clarity):
http://jsfiddle.net/LnKND/1/
Any idea how to fix this using only css and no extra elements? Or is this just the way it's rendered currently and should I find another solution?
Add
border-bottom-left-radius:10px 20px;
border-bottom-right-radius:10px 20px;
reference : http://www.w3.org/TR/css3-background/#the-border-radius
for mozilla use
-moz-border-radius-bottomright
-moz-border-radius-bottomleft
if you want, although it handles the issue automatically (if you fix the typo p to px in the example).
reference: https://developer.mozilla.org/en/CSS/border-bottom-right-radius
Related
Consider the following:
I am writing a debug class to show the position of elements on a page. I want to show the margin edge above (outside dashed line), but realise I can not use the border as this is the inside margin edge. How can I do this?
You’re probably best off setting an outline in combination with an outline-offset. outline is like border, but doesn’t take up any space in the layout and has a slightly different set of rules. Given a div with a 1px border and 10px margin, you’d add an outline like this:
div {
border: 1px solid black;
margin: 10px;
outline: 1px solid red;
outline-offset: 10px;
}
More info on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset
Unfortunately outline-offset isn’t supported in IE. If you need to support that then you’ll have to go down the psuedoelement route as per the other answers.
The box model prevents this.
As you in your original post the margin of a box is not included in it's content size. Without changing your margin to padding this could only be done with pseudo elements.
http://jsfiddle.net/Fcwkw/1/
Since you mentioned it's a class you can simply get a div's margin with some Javascript and set the pseudo padding to the margin.
That's not how border's work, and your image is a perfect example of that. You could create a border with a second element or with the use of :after for example...
You can use :before/:after with position:absolute, border-left/right and height:100%
When we use border it apply outside of element. If I create div of 100px width and add 10px border than its overall with will be 120px and that's why layout will be not good since this extra unwanted width due to width cause problem in float and fluid layout
to solve this problem If I want to create 100px div with 10px border I create div of 80px and than 10px border so its total width will be 100 however its not I want since if I just want to change size in border or div I need to change both
it there any way I can create div 100 px and apply 10px border and overall width will be 100px ?
There is. You can use box-sizing: border-box on the element and the width (and height) will be calculated the way IE did it in quirksmode.
It can be extremely useful sometimes, but imo it's good to learn how the normal box model works and get used to working with it first.
Fwiw I've built a site using box-sizing: border-box as default on all elements and I would actually not recommend it. Partly because I'm really used to the normal box-model but mostly because there are still bugs with box-sizing in some browser (FF and percentages I remember messing up).
Edit: Note that it doesn't work in IE<8.
Edit2: More here: http://paulirish.com/2012/box-sizing-border-box-ftw/
This is classically solved this way with a CSS2 / IE5,5/6 compat solution by putting two divs inside each other:
<div class="size">
<div class="border">
Give me some border ;)
</div>
</div>
In the CSS you make use of the size-div to set the size and the border-div to set the border:
.size {width:200px; height:200px;}
.border {border:10px solid blue;}
So even if you only know the standard box-model you can solve this.
See http://jsfiddle.net/6K2vS/ for an online demo of this.
In some really old browsers you sometimes even need to set a zero-width border to the outer element to have this working. Just noting if you look for some backwards compatible solution.
This question already has answers here:
CSS: Background image and padding
(9 answers)
Closed 3 years ago.
I'd like to add a background to a div, position right center, but!, have some padding to the image. The div has padding for the text, so I want to indent the background a little. probably makes most sense w/ example:
http://jsbin.com/umuvud/edit#javascript,html,live
Thanks!
Updated Answer:
It's been commented multiple times that this is not the correct answer to this question, and I agree. Back when this answer was written, IE 9 was still new (about 8 months old) and many developers including myself needed a solution for <= IE 9. IE 9 is when IE started supporting background-origin. However, it's been over six and a half years, so here's the updated solution which I highly recommend over using an actual border. In case < IE 9 support is needed. My original answer can be found below the demo snippet. It uses an opaque border to simulate padding for background images.
#hello {
padding-right: 10px;
background-color:green;
background: url("https://placehold.it/15/5C5/FFF") no-repeat scroll right center #e8e8e8;
background-origin: content-box;
}
<p id="hello">I want the background icon to have padding to it too!I want the background icon twant the background icon to have padding to it too!I want the background icon to have padding to it too!I want the background icon to have padding to it too!</p>
Original Answer:
you can fake it with a 10px border of the same color as the background:
http://jsbin.com/eparad/edit#javascript,html,live
#hello {
border: 10px solid #e8e8e8;
background-color: green;
background: url("http://www.costascuisine.com/images/buttons/collapseIcon.gif")
no-repeat scroll right center #e8e8e8;
}
this is actually pretty easily done. You're almost there, doing what you've done with background-position: right center;. What is actually needed in this case is something very much like that. Let's convert these to percentages. We know that center=50%, so that's easy enough. Now, in order to get the padding you wanted, you need to position the background like so: background-position: 99% 50%.
The second, and more effective way of going about this, is to use the same background-position idea, and just use background-position: 400px (width of parent) 50%;. Of course, this method requires a static width, but will give you the same thing every time.
Method 1 (99% 50%)
Method 2 (400px 50%)
There is actually a native solution to this, using the four-values to background-position
.CssClass {background-position: right 10px top 20px;}
This means 10px from right and 20px from top.
you can also use three values the fourth value will be count as 0.
you can use background-origin:padding-box; and then add some padding where you want, for example: #logo {background-image: url(your/image.jpg); background-origin:padding-box; padding-left: 15%;}
This way you attach the image to the div padding box that contains it so you can position it wherever you want.
In case anyone else needs to add padding to something with background-image and background-size: contain or cover, I used the following which is a nice way of doing it. You can replace the border-width with 10% or 2vw or whatever you like.
.bg-image {
background: url("/image/logo.png") no-repeat center #ffffff / contain;
border: inset 10px transparent;
box-sizing: border-box;
}
This means you don't have to define a width.
first off, to be a bit of a henpeck, its best NOT to use just the <background> tag. rather, use the proper, more specific, <background-image> tag.
the only way that i'm aware of to do such a thing is to build the padding into the image by extending the matte. since the empty pixels aren't stripped, you have your padding right there. so if you need a 10px border, create 10px of empty pixels all around your image. this is mui simple in Photoshop, Fireworks, GIMP, &c.
i'd also recommend trying out the PNG8 format instead of the dying GIF... much better.
there may be an alternate solution to your problem if we knew a bit more of how you're using it. :) it LOOKS like you're trying to add an accordion button. this would be best placed in the HTML because then you can target it with JavaScript/PHP; something you cannot do if it's in the background (at least not simply). in such a case, you can style the heck out of the image you currently have in CSS by using the following:
#hello img { padding: 10px; }
WR!
To add space before background image, one could define the 'width' of element which is using 'background-image' object. And then to define a pixel value in 'background-position' property to create space from left side.
For example, I'd a scenario where I got a navigation menu which had a bullet before link item and the bullet graphic were changeable if corrosponding link turns into an active state. Further, the active link also had a background-color to show, and this background-color had approximate 15px padding both on left and right side of link item (so on left, it includes bullet icon of link too).
While padding-right fulfill the purpose to have background-color stretched upto 15px more on right of link text. The padding-left only added to space between link text and bullet.
So I took the width of background-color object from PSD design (for ex. 82px) and added that to li element (in a class created to show active state) and then I set background-position value to 20px. Which resulted in bullet icon shifted inside from the left edge. And its provided me desired output of having left padding before bullet icon used as background image.
Please note, you may need to adjust your padding / margin values accordingly, which may used either for space between link items or for spacing between bullet icon and link text.
code: http://jsfiddle.net/xVCrn/1/
(works best in chrome / webkit)
I'm trying to get the red part to have 1px of margin inside the dark buttony area. but I can't seem to change the height of the red part. =(
the goal:
If using display-inline you can set it's height. You will also want to set the line-height as well. For example I added line-height:17px; and it centered it pretty good.
Example: jsFiddle Example
Tip: For webkit browsers on elements with a border of 1px and border-radius. Use 1px double #color It'll help with the jagged lines. I believe this is mostly a problem in Chrome that hasn't been resolved.
Adding display: inline-block; to the red part lets you control its height.
Here's an example (with some padding added to make it look nice): http://jsfiddle.net/xVCrn/
Disclaimer: I have already seen the following questions and their solutions did not apply to me even though they are very similar situations:
Creating a CSS3 box-shadow on all sides but one
How to add drop shadow to the current element in a tab menu?
CSS shadows on 3 sides
Simply put, I am trying to add a -moz-box-shadow of 0 0 10px to the .current_page_item class that is applied to the currently active tab in the tab navigation at the top of my website. The website does not yet include the actual box-shadow or any of these changes, I have only been playing with these modifications in firebug for now before I actually publish them. Naturally this causes the shadow to appear on all sides, and so the bottom edge's shadow overlaps into the .content div which stores all of the blog's actual content, i.e. posts.
Based on what I have seen so far, it seems like I should set the z-index of something, not sure what (I have tried ul.menu) to something lower and the z-index of the .content div to something higher, but this seems to have no effect.
I am just wondering if this is normal behavior and if not, if someone could help me out with this situation.
Thanks, I really appreciate it.
EDIT: I put box-shadow in the post earlier, but I meant the respective specific directives, such as -moz-box-shadow. That was not the problem I was having.
You will need to add overflow:hidden on the ul.menu as honeybuzzer mentions, but since that would also cut-off the top shadow you should add some padding-top to the ul.menu as well..
overflow:hidden on ul.menu seems to get rid of the bottom shadow.
clip-path is now (2020) an excellent solution for hiding specific box-shadow edges if you're wanting the box-shadow to be cut off "clean" like this:
.shadow-element {
width: 100px;
height: 100px;
border: 1px solid #333;
box-shadow: 0 0 15px rgba(0,0,0,0.75);
clip-path: inset(0px -15px 0px 0px);
}
<div class="shadow-element"></div>
Simply apply the following CSS to the element in question:
box-shadow: 0 0 Xpx [hex/rgba]; /* note 0 offset values */
clip-path: inset(Apx Bpx Cpx Dpx);
Where:
Apx sets the shadow visibility for the top edge
Bpx right
Cpx bottom
Dpx left
Enter a value of 0 for any edges where the shadow should be hidden and a negative value (the same as the box-shadow blur radius - Xpx) to any edges where the shadow should be displayed.
This solution removes the need to apply styling to a parent element, which gives more flexibility.