I have been googling for rounded corners with a css div.. but found very cluttered stuff.. some are still using for images of rounded corners and placing them on four corners...
can somedoby help with with a simple CSS code for this... or can it be attained with jQuery
The CSS way to support border radius is as follows:
CSS:
.myClass
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
This will tell Mozilla, Webkit and then standards reading browsers (as far as I understand FF4, Chrome 6 and IE9 will read without the browser prefix) to round your corners by whichever pixel radius you see fit :)
Images were used before these CSS options were available, and the articles are still there. There are also jQuery solutions such as the Curvy Corners script which does support IE.
Related
I have a problem with background-color of an element overflowing it's border when using border-radius. I have seen this problem many times and it isn't a special case.
Here is the description:
I have a <input type="submit"> which has the following styles:
background-color: #FF0000;
border: 2px solid #222222;
border-radius: 5px;
And if you look at the picture blow, the background-color is overflowing a little at all 4 rounded corners:
Note: To see the problem better I used the browser's zoom feature. So the picture is a little larger than it's original.
This problem always happens, usually I don't see it because my colors are in similar ranges but when using completely different colors like picture above, it's obvious ...
I believe it is a rendering problem in the browser (Firefox 30 and IE11) since I can't see the same problem using Google Chrome. How can I fix this in Firefox and maybe IE? (IE isn't important)
To fix this issue in FireFox, looks like there is a simple trick with background-clip:
background-clip: padding-box;
Demo
There is still another work-around with using linear-gradient background and I found out that setting background-repeat to no-repeat works:
background:linear-gradient(red,red) no-repeat;
Demo 2
I'm attempting to fix my CSS to allow older IE's to view my web site as best as possible.
I'm using 'border-radius' to style form fields giving them rounded corners. For the older IE's I'm using the background image below--
http://studio.allanbendy.com/sites/all/themes/studio_allanbendy_7/i/form-textfield-bg.gif
.form-textfield {
background: url("/i/form-textfield-bg.gif") no-repeat bottom right;
background-attachment: fixed;
height: 15px;
width: 362px;
}
Unfortunately the CSS above does not seem to style the text field on IE 7 and 8. It works just fine on IE 6.
Any suggestions?
Remove the background-attachment: fixed;. Because IE6 ignores this for non scrollable elements it's displayed there. But at all the attachment definition makes no sense, if you want to style a single element.
Instead of an IE-specific graphic, I'd recommend using CSS3Pie to do rounded corners in IE.
It's a great solution to get IE to support standard CSS border-radius style.
Does anyone know something more about Opera outline bug?
Check this out:
http://jsfiddle.net/BYgMr/
<div id="outline">TEST</div>
<div id="another-div">Another div</div>
#outline {
border: solid 1px #000;
outline: solid 1px red;
background-color: #fff;
width: 200px;
height: 200px;
}
#another-div {
position: absolute;
top: 100px;
left: 100px;
border: solid 1px #000;
outline: solid 1px blue;
background-color: #eee;
width: 200px;
height: 200px;
z-index: 5000; /* even this is not helping */
}
I'm using the latest Opera, I've checked on TWO different machines with different Opera versions all of them render it like:
What's THAT? In any FF/Safari/Chrome the outline goes below grey area, but in Opera it's still above (even if div parent is way below!).
Google search gives only "Opera 9.5+ CSS bug: rendering outline over absolute positioned" link, but it doesn't want to open.
Any temporary fixes? Or maybe I'm blind and made a horrible mistake somewhere?
This is more of a missing spec in Opera rather than a bug. A bug constitutes something not working according to specifications and Opera is following W3 standards according to step 10 - http://www.w3.org/TR/CSS21/zindex.html)
It is a missing spec in Opera because there's no way to set a style above the last block drawn namely an "outline".
Its probably in our best interest not to use an outline when we could use border or box-shadow but I can't do that in my case since I've got a tooltip which thousands of people load independently onto their sites. And I don't have the luxury of changing everybody's template styling nor would I ever want to.
I've submitted a bug report to Opera (DSK-339836). Hopefully they'll give us a way to draw something above the last thing drawn (ie. outline)
This is not a bug!
http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines
The outline created with the outline properties is drawn "over" a box,
i.e., the outline is always on top, and does not influence the
position or size of the box, or of any other boxes. Therefore,
displaying or suppressing outlines does not cause reflow or overflow.
Outline is not supposed to be "just another border" property. Its more needed for debug, or creating visual UI hints, around certain elements.
It's not a "bug," per se, but a difference in how the spec was implemented. The outline highlights the edges of the box. That's it. It isn't supposed to be used as a border. If you look closely, you'll see that only the red outline overlaps the other box, but the dark border does not.
Is there a reason you're using a border and an outline and overlapping divs? That seems like an odd use case. If you need to use both, you can use box-shadow as a bit of a hack to get the effect you want in most recent browsers: box-shadow: 0px 0px 0px 1px red;.
First: I see a lot of talk and no intelligent answers.
Second: the outline property in opera seems to have a positive Z-Index and stays on top of all other Z-Indexes.
Third: I came looking for a fix or a deal with it, but instead got rubbish and opinions, and we all know what opinions are like.
I see this as a browser code issue that separates the outline from the element and gives it a positive Z-Index above everything else. All other browsers I have tried work fine including mobile browsers, except Opera.
I was once fond of Opera as a mobile browser but am now seeing more draw backs than anything else.
The only fix I see at this point is a browser ID script that removes the outline property for the Opera browser.
Yes, it is a bug!
CSS 2.1 outlines differ from borders in the following ways:
Outlines do not take up space.
Outlines may be non-rectangular.
So nowhere it states that outlines should be on top of other boxes. Borders don't do that! That the outline is drawn above its own box is allright but thats it. Another box above with a higher z-index and it should not be visible.
I can not even nicely show a floating popup window over a div with an outline, it shines through! This is simply wrong. No other browser does it like this.
I've got a webpage I'm designing and my design works great in google's Chrome browser but I'm using the CSS 'border-radius' property which as I'm sure you know isn't supported by IE. I'm trying everything I can think of but I've got a few things going on that are causing me a lot of trouble
The 'box' in question that I'm trying to get rounded corners on has a white background with a background image
The page background is a gradient and the outside corners must be transparent to look right.
I've got a green border running around my box.
Here's a sample image that shows what I'm trying to achieve:
alt text http://www.freeimagehosting.net/uploads/77c9ec6c32.png
Let me know if it would help to see my current CSS and HTML. I've tried a lot of different things but they all have one problem or another. The box background is set in my CSS as a non-repeating image set in the lower right and the fading effect comes from it being partially transparent so it fades to white since that's the background color of the box. A fluid solution would be nice but I can use a fixed-width solution just fine.
The background is what's causing my main problem. I can't figure out how to make the background fill the whole thing if I break up the HTML into more than one div.
HTML:
<div class="content">
<jdoc:include type="component" />
</div>
CSS:
.content {
background-color: #FFFFFF;
border: solid 2px #ACD579;
-webkit-border-radius: 13px;
-moz-border-radius: 13px;
border-radius: 13px;
padding: 1em 2em;
}
.content
{
background-image: url(../img/pagebG.gif);
background-position: bottom;
background-repeat: repeat-x;
}
It would be better if you provide your code, so we can see where you're going wrong.
Also, is the page breaking in IE6? or just IE in general?
To get rounded corners in IE you could use CSS3 Pie, which makes "Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features.".
Here's a quick and dirty round corners technique I've been playing around with.
<!-- assuming the div isn't statically positioned -->
<div>
<img src="box_TL.png" style="position:absolute;top:0;left:0;"/>
<img src="box_TR.png" style="position:absolute;top:0;right:0;"/>
<!-- other content -->
<img src="box_BL.png" style="position:absolute;bottom:0;left:0;"/>
<img src="box_BR.png" style="position:absolute;bottom:0;right:0;"/>
</div>
Yeah it's ugly, but it's fast, the corners are fluid, it avoids nested divs and requires no javascript. The corner images and content order makes no difference, but I thought it might be more intuitive to order corners and content this way.
Question: How terrible is this technique? Is it passable or should I abandon it completely?
I'd use jQuery Corner Plugin. It's very fast and works in all modern browsers, and also in IE6.
It's terrible. Your markup should be content, and your layout should be in the style. Not intermingled. You should go with:
<div class="whatitis">
bla blah ... content here
</div>
and the style:
.whatitis {
background: whatever;
border: whatever;
border-radius: 1em;
-moz-border-radius: 1em
-webkit-border-radius: 1em;
}
Yes, sure, some browsers won't get rounded corners. But if you hack up a solution that will give properly rounded cornsers even in browsers that does not support that, you will have a complex solution, and odds are that your site will not work att all in some other browsers. So you should ask yourself: What is more important, that the site works at all in some browser X or that you get rounded corners in some other browser Y?
Addition: Using the jQuery plugin mentioned in another answer (or some other pre-packaged solution) might be accepptable. As long as it does not require any extra <div>, <img> or other tags.
It's a terrible solution, sorry :-)
It's true that you don't need any JavaScript or nested div elements. The JavaScript is easily avoidable, no matter what. But is four irrelevant img elements better than a few nested div elements? The img element is supposed to contain image content, using it for layout purposes is basically the same as using tables for layout. Yes, it works, but it's wrong, and it ruins all semantic value.
If I were you, I'd do it this way (excuse the silly class-names, they are just there to illustrate):
The markup
<div class="boxWithRoundedCorners">
<div class="roundedCornersTop">
<div class="roundedCornersTopRight"></div>
</div>
<p>Your content goes here, totally unaffected by the corners at all. Apply all necessary margin and other styling to make it look good.</p>
<div class="roundedCornersBottom">
<div class="roundedCornersBottomRight"></div>
</div>
</div>
The CSS
.boxWithRoundedCorners { background: red; }
.roundedCornersTop {
background: url(topLeftCornerPlusTheTopOfTheBox.gif); /* Should be pretty long. Assuming your corners are 20*20px, this could for instance be 1000*20px, depending on how large the box would ever be in the real world */
height: 20px;
}
.roundedCornersTopRight {
background: url(topRightImage.gif);
width: 20px;
height: 20px;
float: right;
}
.roundedCornersBottom { background: url(topBottomCornerPlusTheBottomOfTheBox.gif); /* same "rule" as above */
height: 20px;
}
.roundedCornersBottomRight {
background: url(bottomRightImage.gif);
width: 20px;
height: 20px;
float: right;
}
Got it? Hang on, I'll put up an example somewhere :-)
Edit: Just threw up an an example!
Anyhow, this method will ensure a complete flexibility regarding height and width of the box, and the layout within the box always works the way it should, unaffected by the corners.
Yes, it gives you some nested divs with no purpose other than the layout - but then again, that's what DIVs are used for. IMGs should always be content-related imagery.
You could do it with all the corners being 15*15px and setting the background-color of the container. However, when stretching these images like this, you get the opportunity to add shadows, gradients or other effects. This is what I'm used to do, so I did this this way with the stretched images.
This method is well tested out, and should as far as I know/remember work fine at least all the way back to IE 5.5.
This is a very old topic, but since it's re-appeared on the front page, I'll add a comment.
In the last few months, a new solution has appeared for rounded corners, which solves the issue for all relevant versions of IE (6,7,8).
CSS3Pie is a 'hack' for IE which allows you to set up rounded corners in your CSS and not worry about it anywhere else. At a stroke, you can throw away all those extra divs in your markup and those jquery plugins, and just specify it in your stylesheet the way it should be.
All other browsers support rounded corners in CSS, and have done so for long enough that you don't need to worry about older versions.
CSS3Pie also helps with CSS gradients and box shadows in IE too, so it's a very big win for cross-browser developers.
you'll come into issues with IE6 using PNGs so you will either need to add the correct CSS filter background to divs instead of images or use javascript to help turn the png images into transparent gifs with the png background added.
http://www.twinhelix.com/css/iepngfix/
If the box is fixed width, then there's an interesting trick you can do which works in IE8 and the rest (but not IE7-):
div.rounded {
width: 600px;
padding: 0 10px;
}
div.rounded:before,
div.rounded:after {
display: block;
content: "";
width: 600px;
height: 10px;
}
div.rounded:before { background: url(images/rounded_top.png); }
div.rounded:after { background: url(images/rounded_bottom.png); }
Unfortunately this doesn't work with anything that has a fluid width, and it's not copatible with older IE browsers, but I still like it :)