This is the blog of Adam Kalsey. Unusual depth and complexity. Rich, full body with a hint of nutty earthiness.
This is the blog of Adam Kalsey. Unusual depth and complexity. Rich, full body with a hint of nutty earthiness.
Excerpt: There lots of ways to create rounded corners with CSS, but they always require lots of complex HTML and CSS. This is simpler. Read the whole article…
A transparent GIF has a slight halo of whatever the transparent matte color was. You can’t put the image on another color of background without the halo showing. That’s why images that look transparent on a white background look so bad when you put them on a dark background.
You could probably create an image with two very similar colors and the antialias halo wouldn’t be very noticeable.
What a transparent corner would do, though, is let you push the text closer to the top and bottom edges. With a transparent corner, you could change the P style declaration to have a negative top margin and the text wouldn’t overlap the image.
Probably nothing new here, but CSS-3 offers the ‘border-radius’ property which seeks to alleviate the need for hacks.
Now if only we could actually start using it before 2010 or so.
http://www.mezzoblue.com/cgi-bin/mt/mezzo/archives/000182.asp#roundedcorners
I’ve been reading a bit about this topic lately, and yours is one of the more straightforward methods. Thanks for sharing it! :) Since I’ve got skins on my blog, I made myself one with rounded corners using the -moz-border-radius, and so if someone’s browser doesn’t support it, they have other choices, and I can enjoy the nice rounded boxes ;) (IE6 just shows the boxes without rounding, which still looks okay, IMO) You can see it by going here, if you’d like! http://kadyellebee.com/index.php?newskin=19
Okay, first and foremost, this thing doesn’t even try to remember me. In your cookie javascript, in lines like ” setCookie(whatever, whatever, now, ”, HOST, ”);” make it ” setCookie(whatever, whatever, now, ‘/’, HOST, ”);” so that it sets the cookie on the root, ie kalsey.com. Same thing with deleteCookie. Done with that.
One thing I like about the other approach is that even though the rounded corner may be 15px tall, text can still slip up ‘between’ the corners (With the method featured in the entry, everything must start below the roundtop div, and it’s being pushed down 15px. Now I don’t know about you, but I would’ve liked 10 of those pixels in height.), and that looks more dynamic to me. I’ll experiment with a variant of this method to make the same effect.
I’m a bit torn about -moz-border-radius, because it’s providing something for Mozilla only, and it’s a non-standards property. So if you use it, your CSS will never validate (correct me if I’m wrong) and while I know that it’s a fast quick way to make it look good, I wouldn’t do that.
Awesome. Thanks for the article.
As for the issue on transparents GIFs and halos and such, wouldn’t using an alpha channel transparent PNG work? Does IE support this yet?
Looks great in Safari 1.0 as well. Thanks for the tutorial!
Jesper: If you use corner images that are transparent as Rich suggested, you can set the margins on the inside P tag to a negative value and push the text as far to the top as you’d like.
Taranis: IE doesn’t support alpha channel transparency without a really ugly hack. http://support.microsoft.com/default.aspx?scid=kb;en-us;Q294714
It’s likely that we’ll have full CSS3 support in browsers before IE supports alpha channels.
Top article. I’m pretty new to CSS, having been doing web dev for a while and being strictly table oriented.
I’m really beginning to see the light though and will be doing most of my stuff in CSS from now on, tutorials like this are excellent.
PS. Works great in Firebird, but you knew that already :-)
Excellent tutorial. Short, simple, and does the job perfectly. Thanks!
Why are people so enamored about rounded corners? Isn’t the point of CSS to stop the hacks we had to do with tables?
Very nice. Works in Safari 1.0, too.
Nice. Now do it with a variable width! Would it still work with .roundcont { width: 100%; ?
Works v. nicely in IE5.5./win, IE5.0/win. In IE4.0/win, it mostly works, except there’s a color bar the width of the full graphic at the bottom. Screenshots available upon request.
To the person above who asked, “Why are people so enamored about rounded corners?”
Answer: Clients. “Oooo, shiny!” If you can make shiny simple, do it!
I use a similar technique on my site at http://weblog.stanton-finley.org/ . It uses the rounded corner method described at http://www.albin.net/CSS/RoundedCorners/ . I should add your “style=”display: none” to my code at some point to hide the corners from non-compliant browsers. Excellent suggestion! The technique I use works fairly well across all modern browsers, but a mozilla bug ( http://bugzilla.mozilla.org/show_bug.cgi?id=209135 ) can occasionally mis-render the bottom border of a box by one pixel.
from one Adam to another…
Getting IE to do the alpha channel “correctly” doesn’t have to be painful. WebFX has, for a while, make an IE behavior available that does all the thinking for you (as long as you aren’t trying to use alpha transparency for background images).
http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
Its a behavior so you won’t validate but you can simply create a stand alone .css that only has the
img { behavior: url(“pngbehavior.htc”); }
and those who don’t care about behaviours will ignore it.
And only one file won’t validate.
Adam: The con with this is not that it is a hack. Couldn’t care less. The con is that it will not work with background images.
As usual, Netscape destroys everything. Hate them.
Hi Adam
This is definitely the best technique I have come across using graphics for corners - though I found it can be quite hard to get a completely smooth corner using gifs if your inner box is white against a coloured background - creating a larger box in the first place to cut the corners from seems to improve this.
One extra thing that might be worth considering would be to set the pixel height in the html to 1 x 1 for those using browsers that don’t even support inline styles (eg NN3) and then just let the CSS define the 15 x15.
Probably a silly question given the trouble height can be… but say we want a 400px high box that is a fluid width?
I can’t get the bottom div corners to behave. Anyone else? It can be done in a messier way but then I might as well use a table.
As you note, height can be a pain, especially when the content you have overflows your desired height. You could try playing with the overflow properties, but without knowing what specifically you’re trying to accomplish, that’s about the only advice I have for you.
I’ve used this method on two different menu bars on sites. Since there isn’t much content in them, the effect is a fixed height and fluid width.
Right — sorry there for lack of clarity.
Specifically I want to have the height of a box always be 90% or so… effectively filling the page no matter the viewport.
Now I know this is trouble with any div and even the tricks of setting html, body {height:100%} don’t guarantee results.
Effectively this is akin to having a fluid height with a foot that sticks at the bottom of this fluid height.
fluid height div
++++footer pinned at bottom++++I have seen one truly successful implementation and it involved js which I abhor as a production solution.
btw: thanks for your community contributions via this weblog.
I’d approach this a bit creatively and use a fixed-position div at the bottom of the page to contain your bottom corners and footer.
Great article thanks. I’ve been trying to adapt this for a three column layout where the only center column is liquid width, using margin-left and margin-right to get the right width.
Looks great in Mozilla but doesn’t position the left rounded corners in the center div correctly in IE6 (there’s about 3px of the background color to the left of the corners showing).
Seems like the only way to fix that would be to add a width: specification (auto doesn’t work), but then I run into the problem that width:100% is interpreted differently in IE6/Mozilla.
Any suggestions/advice?
(Code currently sitting here: http://www.cre8d-design.com/redview/)
Thanks! Rachel
Sorry, the URL came out wrongly,
I recently created a bordering function using images. check www.dubheart.com (still border) or www.maxfire.net, where I’ve used animated flames to border divisions.
Hey guys, can someone offer me some advice here, check this link for me:
I’m trying to get the word Membership pushed to the top center between the left and right corners. Ignore the colors, it’s just so I can see what’s going on. Any ideas or tips?
Thanks, Chris cjoh44@yahoo.com
Since the images have display: block set on them in the stylesheet, they become a block element and won’t show up inline any more. That’s why the text always appears below them. If you want to put text closer to the edge, try using a negative top margin on the inside text.
I have tried ever css style to create rounded corners yours is the first too work! Well done :)
Concerning the background-color issue, and aliased corner images:
you can simply create your box with anti-aliased corners, thusly making your image only 2 colors, then making the transparent .gif with only the white showing. This way, no matter what your background color, the corners always work.
Unless you are really bent on “smooth” rounded corners, this technique works great. And anti-aliased, pixelized corners don’t look bad at all.
Nice article. :)
Yes Adam, nice article
Maybe as a challenge I would like the corners somewhat fancier. This is quite simple with a 9-cell table in a #-format. Could it be done with DIVs as well?
See http://www.xs4all.nl/~quadsk8l/Articles/AnElasticPlasticButtonjus.html for what I mean
thnx for the tutorial..
Hi thanks for the tut. :)
I’ve floated an image inside the box which works without a problem. With the text protion however, in tables I usually put this in a separate column which can then be formatted within the td.
Can you use CSS to format the text separately from the image? (want to adjust the padding of the text from the top of the div).
Just wondering if this can be done. Thanks.
I’m trying to create a table using CSS whereby the table has a stroke of “1” using #000000 and only the top of the table has the orange and the bottom part of the table has the orange, but everything in between is white (with the black stroke).
Basically what I want is the color only to show on the top and bottom sections, but still using rounded corners all the way around. I’m pretty much out of luck aren’t I?
Kevin
This is simple and elegant, but only works with solid backgrounds. Have you explored any solutions for varying border-widths for an outlined box? Stan Finley’s solution (posted above) is one of the better methods but I have trouble getting it to work with nested divs, which break the border display in IE PC
Thanks for the tutorial. Unfortunately, making images for the corners forces you to make images of different colors depending on box color and the color of the background.
Well, there’s another way. Check out my code and notice that I have NO images to do these bordered, rounded, smooth(antialiased) corners.
Since I haven’t seen this code anywhere else on the web yet I expect that most of you will be very surprised. If you use this code, please credit me. Thanks!
Shane Clements
Shane,
Looks an awful lot like Simon’s… http://www.sitepoint.com/article/rounded-corners-css-javascript
I’ve found that if the outer div needs a border, then the image divs and the images need a margin of -1px for the position that they are in.
so: div#top { margin: -1px -1px 0 0; } div#bottom { margin: 0 -1px -1px 0; } img.corner { margin: 0 0 0 -1px; }
It works most of the time. IE 6 tends not to work with this sometimes. I just got fed up and did a *HTML DIV#bottom {display: none;}
I loved your article it was one of the best on the matter. It was the only one that i did not have to use a table with a fixed width, which was very useful as i could keep my current layout. However i have a favor to ask, could anyone make those images that same however 25x25pixels and colored rgb(000,128,255). Thanks.
This worked easily enough but seems to have a bug. I used this code to wrap around an existing 100% width table that has many tables in it with graphics/text.
When I adjust the window size to manually test from the browser a bug occurs when the scroll bars come into affect (when the graphics cannot be adjusted freely anymore). This is where the right corner continues to float in (when it shouldn’t) because there is no spacer image to force it to stay put.
This is not a problem if I use the traditional method of hard coding the corner images into a table row.
Am I missing something? I would love to use this.
Well done, I’m a beginner at this CSS stuff but at last an explanation on rounded corners that even I can follow. Thanks mate
Excerpt:
i had to add
text-align: left;
to both the “roundtop” and “roundbottom” classes to get this to work properly in IE 6.
otherwise, it works great. thank you for sharing your code and your insights.
Hi Adam.. Guys!
A question I am stumped by but a little similar to what is happening here. Any idea’s on how I could create a placeholder/frame with rounded corners that each of my thumbnail images (about 200 per page) lay inside to;
a: Align and center these images as they vary in side b: give them a nice finished look
I am rapidly approaching give up point!
Thanks
You cut the image into four and yet you only used only 2 (top left and bottom left)
why????
Very nice, Adam. Problem for me was that on IE6, I was getting an extra few pixels below the .roundbottom div. Didn’t matter what I played with, it wouldn’t go away!
So, with a bit of luck (in Australia, we say “I arsed it!”), I tried the following. Tested it in these: IE6: OK Safari 1.2: OK Opera: OK Firefox 1.0: OK Netscape 7.1: who cares! (no, seriously, it’s OK)
I just played about with the vertical align and made an extra class for the upper and lower right-hand gifs. As I am a newbie, I don’t know if this is legit, but what the heck: it seems to work!
(css)
.roundcont { width: 250px; background-color: #f90; color: #fff; }
.roundcont p { margin: 5px 10px; }
.roundtop { background: url(r1_c3.gif) no-repeat top right; text-align: left; }
.roundbottom { background: url(r3_c3.gif) no-repeat bottom right; }
/* This is for the top right image */ img.corner1 { width: 11px; height: 11px; border: none; display: block !important; vertical-align: top; }
/* This is for the bottom right image */ img.corner2 { width: 11px; height: 11px; border: none; display: block !important; vertical-align: bottom; }
Cheers! Andy
This is working well on my site for css buttons…
If only I could work out how to create a hover effect, something like; .roundcont a:hover { background-color: #bbffff; } This just makes the text change background colour, not the whole square. I know the corners won’t change colour but thats ok, for the buttons i’ve created this won’t be noticable as the corners are only 1px square and are the same colour as the background.
If anyone can work out how to do this please pass on the good cheer!
thanks
Why is it that if i use in the top of my html document, the two background doesn’t appear??
Kristian
I cannot get this to work when the style sheet is external.
I am I doing something wrong or does this only work when the style in inline?
Cool info.
But I can see that the article is from July 23, 2003 so maybe other things can be done today?
I know of the stuff in Mozilla like: -moz-border-radius: 0.5em; Anyone know if internet explorer has something similar?
Thanks Claus
my whole “roundcont” is displayed with one color, I cannot differentiate between color of corners and background color. What am I doing wrong?
I figured it out: my images had transparent background, and color was coming through.
Is there a way to do the same thing, but with the images with transparent background?
Thank you
how can i set it so that only one side of corners show?
What’s the point of doing this with CSS if you have to include a lot of stuff in the html-file directly? What I like with CSS is having interchangeable styles for the same markup.
I believe that rounded corners adds pizazz to a web site. It is different than standard tables. Is the rounded corners done in a graphic editor then created with css? Meaning, the rounded corners must be created first prior to placing the css code?
Nice article using CSS to do this.
I ran across a program called EZRound ( www.ezround.com ) that makes the graphics, slices them and writes the code for them. It is still all HTML, but I wrote them and they are looking at doing a CSS version too. The program is slick though - creates the rounded corners, drop shadows and all that.
Just figured to pass the link along for those “graphically challenged” like myself ;-)
Carl
Not bad, easy to implement, and looks good and works in the browsers I code for. I noticed someone mentioned coding for NN3. . .why bother?
This is the Rube Goldberg way of creating round corners. Clever, but incredibly scenic. Wait I got it, OBG, Object Oriented Graphics. Please make nothing like this ever again.
Wow after reading all these comments I am inspired to post again. I hope these posts are not deleted. Ahem:
I have been making rounded corners professionally, clearly, and with the versatility to do all the requests these people want. How? WITH HTML, use tables people!! We mastered this rounding corners thing years ago and it works FASTER and with more options. Want changeable widths, you got it, want text between the corners, YOU GOT IT. Why is this person going to the trouble of making this more complicated and harder to use?! You guys are de-evolving just to use the novelty of CSS which is great, but not for THIS. Someone went to a lot of trouble to create the table options such as border=0 to solve these problems a long time ago… there is no advantage to doing this in CSS. OMG, I am so upset right now.
You don’t need the image to go in your html markup. In fact, personally, I don’t even slice my image - I create a circle and use CSS positioning to get the right part of it to show in the right corner. See the example here:
Makes it easy.
Nick Please do us all a favor and visit http://w3c.org for updated xhtml standards. Yes tables work for rounded corners but if the page doesn’t load properly the page just looks “broken”. Tables were meant for “tabbed delimited data” not paragraphs and pics. Get over it already
I´ ve read a bunch of articles which condemn the employment of tables in favour of CSS design;
I will not defend the use of the archaic table design , I think mankind walks forward;
however I´ve visited so many pages on which tables have been banned and found that they´re boxy , I look at them and feel like got back in time 10 years ago.
I am still trying to learn how to handle CSS properly and have asked myself:
it is possible to do with CSS the same I do with tables (usually tables created by macromedia Fireworks from sliced optmized images that load fast and neat )?
I love the “stick to tables” sentiment. Thank heavens these people don’t run the computer world. Or we’ll still all be staring at a nice green prompt on a black screen. Terminal sharing anyone?
The whole point of using CSS is so you can do a million more things than you ever could with nested tables and still have full flexibility. I have about 200+ documents on my site in XML form. Can you picture me going to each and every document and changing tables? NO! With CSS anyone can change layouts every week if they so wished and still have the content appear usable for folks with special needs. e.g. Screen readers for the visually impared or PDA screens for people on-the-go.
Not only that, the table world forced boring and “boxy”. With CSS, it’s can be just a preference, with half the code. Tables used far more elements than was needed. It cluttered the content with multiple attribute junk. Believe it or not, your HTML becomes shorter with CSS layouts. I can have id=”summary” on a div and actually have the site summary in it!
Very nice example BTW… I was looking around for something exactly like this.
Thanks a bunch!
is there a way to incorporate this coding in an IPB forum? i want to have it so when people choose the ‘quote’ option, the box has the rounded corner effect.
just curious.
I have adapted your idea on my site, but I have been told it does not display correctly on IE on the PC.
Works fine in Safari, Firefox, Opera and IE on the Mac.
Also validates at compliant XHTML.
Any ideas?
Neil
Ok… I am new to css so be kind…
Can I use this css but instead of text for the content imbed a table… so the table has rounded frame?
Or, is there a better way to give a table a rounded frame?
Please help the newbie.
Perfect, i knew there was a simple way (the tables comment sums it up perfectly).
But for anyone reading this who still holds a candle (even a very dimly lit candle) to layouts using tables, consider this…
Like most CSS enthusiasts, I employ one very simple rule. HTML puts data on a page, CSS styles that data, which means I can never use anything other than CSS for layout and design.
But some people complain that some things can’t be done with CSS, or in some instances CSS is easier. I say this. There are some things that can’t be done with HTML/CSS full stop. There are also things that can’t be done with PHP, JavaScript, C+, Python etc etc etc. All we have are standards and best practices, always design with the limitation of the technology in mind.
Adam, thanks for the blog and for all the great work. Its sites like these that can save a guy a lot of time.
Came across this too. The html version has some complicated css, but the Js version has a cleaner look - as long as you aren’t opposed to JS. Worth checking out though.
The style sheet codes are really very efficient and useful too. So many thanks to the site for such types of manuals. I need at present the stylesheet to create round shaped buttons within the or tag. So please if u help me by sending the stylesheet codes i’ll be highly obliged then.
Thanks Piyukh Ranjan Das. Software Developer India.
What is the point of adding extra HTML code to display rounded corners? I might as well use a table then..
I have made a similar example of this - except it’s fluid horizontally and vertically, color swapable via CSS, and only uses one image :)
Check out my article at: http://www.coonens.com/design/article/2/
I have made a similar example of this - except it’s fluid horizontally and vertically, color swapable via CSS, and only uses one image :)
Check out my article at: Fluid CSS One-Image Corners
I went to Neil Curry’s site using IE6 and it worked fine. But not all of them. Some were all rounded the middle divs were displayed incorrectly. But the page was still impressive. Viva la CSS!
Does not work with Firefox 1.0.1 and Windows XP Professional SP2. At the bottom, the lines of the rounded corners and the bottomline do not meet :-(
anyone have a simple technique to convert this to an outlined box with rounded corners (rather than a solid-color box) ?
Any way to do it using margins/padding/borders instead of a filler image on the top and bottom?
I used your tutorial to add rounded corners to my site. It worked perfectly. Thanks.
The only problem now is that the container is no longer centered on the page. When I remove the code for the rounded corners the page centers again.
Any hints on how to fix this?
-moz-border-radius should validate, as css allows extensions as long as they start with a ‘-’. However it’d be wise to add the css3 version for future standard support.
Thank you!
to confirm wolfie on Firefox 1.04 (winXP fully patched up to 27/08/05) the bottom does not align as it should
You can have any CSS box you want and it even works in Mac-IE:
Hi, Your topics sound interesting but are very hard to read because the page layout is completely garbled for me. I’m using IE5.5 on 1024x768 but your page width seems to be set to an enormous number. The tables are very wide, and the right hand column & google ads overlap your content. Is this a problem with moveable-type?
Jonathan
Nope, it’s a problem with IE 5.5. The browser is over 5 years old, contains very limited support for modern web technologies, and has a number of significant bugs. Since my site is focused on Web technologies, the vast majority of my readers use modern web browsers so I’m not too concerned about problems in older browsers and do nothing to test or code around problems with them.
If you’d like, you can get a newer browser for free from a number of places.…
I’d recommend Firefox, if such a suggestion would be useful to you.
Hi.
I have been using CSS for a while, but I usually don’t post on sites because honestly I don’t consider myself all that knowledgable on topics like this.
This one has been bothering me, and I went so far as to provide what I normally do for this as a solution to essentially get your input on why this is not a good solution for what you are suggesting.
http://www.ernestsalazar.com/rounded-box.html
I don’t know all of the browser compatibility issues with just assigning an alignment to the two right hand images to creat your right hand corners.
Please feel free to flame me on this, but it just seems like this article is a way too complicated solution.
I’m sorry adam, are you saying that the image align issue is a bug in PC-IE 5.5?
I work on a site that is primarily concerned with the new browsers, and I tested this solution on PC-IE Mac-IE Firefox (both browsers) and Safari. I am going to test on Opera in a couple of minutes.
I’m sorry adam, are you saying that the image align issue is a bug in PC-IE 5.5?
I work on a site that is primarily concerned with the new browsers, and I tested this solution on PC-IE Mac-IE Firefox (both browsers) and Safari. I am going to test on Opera in a couple of minutes.
My question to all using IE 5.5…
Why are you using IE 5.5???
I mean come on, Adam’s right, the browser is too old and obviously has bugs related to CSS. So to answer your question, no it’s not a problem with MT, it’s a problem with your out-dated browser.
Ernest Salazar
I think the issue here is using proper CSS for media other than your web browser. This is bascially an issue of Accessibility.
Say that you are using your code for mobile phones, etc. Your example will force the user to see graphics no matter what. The same things applies for the example here.
I’m not debating wether this is a good thing or a bad thing, but the fact is, that you are forcing these images on the media. I think the goal of most CSS is to create code that looks “clean” as just text and then having a style sheet that adds all the layout and fancy graphic elements.
This is the goal when using CSS, unfortunately with all the browser bugs and browser incompatibilities this goal is hard to reach.
Great article! I only wish I would have found it sooner…
I am now trying to center the box on my page, and it seems to be working great in IE and Firefox, but not in Opera 8.5. The problem is that the left-side img’s that are in the html aren’t sticking to the left-hand side, they’re being centered also.
Maybe I’m doing it totally wrong. Here’s how I have it set up currently: I put a before and after the box’s html, and then I added a text-align:left in the css so the text still aligns on the left of the box. Works in all but Opera…? What am I doing wrong?
Thankx for the example, just wat i was looking for!
Adam I have been hacking away at this for hours with no success. Finally I cam across your tutorial and it worked for me. Thank you so much!
I’ve wrote a simple script to generate necessary corner image for any color/background.
hellow. I am learning CSS. I have copyed you code and is working. but when I am replacing you pics with my corner pics lock like s… 2 of them are shown on the etire row - the one in . how can I size them so dont become so big?
You can extend this trick to work on any background color or even round the corners of images without generating new pictures for each one. Make the original set of corners on a white background, then make the color of that corner transparent. You can make this look nicer by using anti-aliasing using a transparent PNG.
Hi Adam,
I’m the owner/webmmaster of CustomHookahs.com and I designed my site from scratch using tables. It looks descent and it got sales, but for the purpose of less code(smaller file size) and for Search Engine Optimization purposes I would like the div and css version instead. This will reduce the file size and the load time for the user. It will also allow me to have the main content closer to the top of the code so the search engines can find what they are looking for sooner. I would like to know how much you would charge to make the div css version for this page(http://www.customhookahs.com/Bohemian-Hookahs.aspx)? Also I plan on making a few site changes and it would be convenient if we can make the change while we are making the div and css changes. If you are interested, please let me know and the price you would charge.
Dear Adam,
Top banana website. Great tutorial and thank goodness there are sites like yours with clarity.
I am CSS newbie and am trying to design a table containing a nested table with both of them having round corners.
I read above about the halo element surrounding images which is driving me nuts.
Do you have any advice on how best to create the round corners for the table using either a CSS or with standard images?
Any help would be appreciated as I am about to throw this laptop out of the window - many thanks.
Cheers,
S
That was the best, and simplest explanation for round-rects I have found. Good job and thanks!
Just wanted to say that I really like this approach, and was wondering if anyone has had any conversation with a roach or armidillo lately, hence forth hither to?
Css Vault has a good method but isn`t aviable now… (too many divs) I don´t rremember the code but the article was in http://cssvault.com/articles/toomanydivs.php
My hole problem with this approach is the the html contains reference to the images. if you have a site with two different skins provided by a css each this will not work fine.
Anyone found a way to have all the image reference in the css ?
MC
Here the types free one… :(
My whole problem with this approach is that the html contains reference to the images. If one has a site with two different skins provided by a css each this will not work fine.
Anyone found a way to have all the image references in the css ?
MC
This technique is simple and fine. But I want to create rounded corners without any background color. How do I make changes to this?
Very useful, look forward to using it, thanks! :)
Hello, I just did a search on Google for “round corners, css” and this was one of the first listings. Thank you very much for the little tutorial, it helped me get an idea of where to start.
The only real problem with this system is when it comes to printing - by default most browsers will print img tags but not background images or colours - you just get the top and bottom left corners. to hide these you can always use the ‘@media print’ css rule.ie @media print { img.corner { display: none !important } }
to make it work with XHTML 1.0 Transitional, include the following text-aligns:
.roundtop { background: url(tr.gif) no-repeat top right; text-align: left; }
.roundbottom { background: url(br.gif) no-repeat top right; text-align: left; }
Hey!
Supernice. I was actually searching for some css which produces rounded corners without any images but I think this technique would require javaScript which I do not favour.
So I guess I will play around with this a little.
Do you think there is a way to put all images in the CSS?
Greetings from Dresden, Germany,
S.
Adam, thanks for a very simple and easy to use way of creating these rounded borders!
:^)
Very simple and useful solution, I was looking for it long time.
I have problem with some css coding. Can anyone help me.
I have used the manginy effect.
I have put the thumb in a tbale becasue I could not make them in a line using CSS. the biggest problem is the bigpicture. It has to stay in place alle the time using CSS. It changes on mouse over thumb.
It looks fine on 1024x768 , BUT when I see the page in a higher screen resolution the picture moves and it must not. Is it not possible to use CSS to have the picture in the same place in all screen resolutions.?? Do I have to use javascript and only tables to make this work. I would be very glad and appriciate any help.
Kindest regards
Nina
Great little piece of code. Got this working in no time. Thanks.
Wicked!
I used your trick on my open source template design seen here http://openwebdesign.org/viewdesign.phtml?id=2628&referer=%2F
AWESOME! Works like a charm.
Nina - Use absolute positioning.
Nina, Put “position: relative” on your main containing div, and then put “position: absolute” on the images you need to stay in place. When an asbolute element is placed inside a relative element it will use the containing relative element as its boundary.
Thats great , i was searchin , for somethin like this …
Great outside , Light inside .
THanks BRO
Nice. I was alwaus making 3 divs and cut image to three parts(of course fixed width). This is expanding possibilities!
Nice work
Nice and concise piece of work, indeed.
Only I’ve tried the “negative margin” method to get the paragraph text to expand higher and lower. This works fine at the top but the bottom corners seem to cover the text… Can this be solved somehow?
Thanks (for sharing 2)
…and what if you got an image or photo on the background?
Smooth solution, thanks.
Nice job. I’ll use this - thanks
pretty cool
Fantastic piece of work mate..
Cheers mate, looks nice and elegant also.
Wow. This is really nice! I thought it only can be done using 9 cells table. Great!
hello. good job. but it don’t works!!! (???) i only have the “lorem…laborum” on white page… (sorry. what i don’t do?)
ok, it works. thnaks
A better way would be if we didn’t have to use -tags. The corner images are never relevant to our content. If there was only a way we could attach more background images to boxes.
This method is just as good as yours. http://www.redmelon.net/tstme/4corners/
*img-tags.
using images for rounded corners is so yesterday and obsolete now that you can accomplish perfect rounded corners using only CSS
http://webdesign.html.it/articoli/leggi/528/more-nifty-corners/
Some versions of IE have trouble with DISPLAY: NONE, so heads up!
Just wanted to say thanks for this resource. I had been reading it thru a few times and today worked it out on my personal site with minimal changes.
My personal next step is to see how well the rounded corners nest within each other, but other than that, there is nothing with this that I couldnt learn from. Thanks again.
It’s more generic if you use images with transparency on a background colour. In the example case replace the orange with a transparent section then the corner images can be used on blocks of any colour.
Hi, Nice job. I have one question though. When you create the rounded square image what did you use ? Also if I created the image how to I make sure the edges when cutting them up are even so they are the same? Thanks…
I appreciate you guys’ sharing.
Richc, would you please tell me how to make images (tl.gif, tr.gif, bl.gif and br.gif ) with transparency on a background colour? Currently I need it customized as the preferred color.
Thanks a lot for your time in advance. Lotus
Please help. I get a large outline and cannot see the right side corners.
I can see the right corners now, i adusted the width. But I still have a large outline that is the color of the bg? Help PLease
Got it
Never mind…
The round corners can be created without images of round corners with less than 25% of the code required using images. I saw it, it’s in my favorites on another computer in another city or I’d give you the link. Throw this corner-image method away.
How to make gradient corners?
hey choim : why dont you get out of here with your foolishness…
choim: probabily he just saw the mozilla’s own implementation of rounded corners as an extension to the “mozilla standarts” and he thought it can be done cross-browser-wise. peh until w3 acccepts we MUST use image based rounded corners
I know of only one method that gets you rouned corners without images, and it involves JavaScript. I personally prefer just using images.
Thanks for this tip. I’ve just started looking into round corners, but it occurs to me there might be an alternative approach which doesn’t involve changing the HTML. That would be to put the corners inside the content DIV (roundcont) and use a margin to separate them from the content. It should be possible to do that using CSS only. Has anyone done this? Am I missing something obvious?
I’ve been after a simple way of getting my site to look a bit more modern and naturally the question of rounded corners came up. I saw a few tutorials but liked yours the best. Keep up the good work!
Hi, been great working through this, but can anyone explain why I can never get top right and bottom right corners to show?
Tried this and it works great, however when I try to add an image and float it to wrap the text it all goes wrong - have you any ideas?
Thanks in advance
Im confused, sorry to say this, but i just dont get it, where do i save the css file? under what name?
Please, Structure first!
Nice, and it works fine on screen, but when i trie to implement a print-friendly page [txt only] with the ’ @media print ’ rule i can’t switch off the topleft and bottomleft images. Is there a way to do this ?
This is a great method! It produces a little extra markup, but if you’re in a rush (like I am now) then there’s no better way to get rounded corners up and running… I had them done in about as long as it took me to copy and paste the HTML and CSS.
Great work, and thanks!
Pat: Save the CSS anywhere you like, and call it whatever you like, just make sure that the page you need can see it :)
I am trying to use 3 images (cut from one image) to create a metal plate navigation bar in a frame. I have tried many different code sets for the CSS and HTML and cannot get this to work correctly. I am working with a left image, a center image and a right image. All are 900px high by 100 px wide. I can get one of them to work correctly, but not all of them. The left and right images should stay constant and the center image would repeat on the Y.
Adam Kalsey
Rich Manalang
July 23, 2003 9:26 PM
Great write-up… thanks! To make it even more flexible, your corner images can be made so that the orange foreground is transparent and the white area can be kept white. Most of the time, I find myself always keeping the background of my sites white while changing the colors of the foreground elements. That technique will allow you to change the color of the tab corners via css without having to change the images.