jumpweb Posted July 22, 2009 Report Posted July 22, 2009 I am currently investigating the best and current way to create rounded corners in my website div's. Upon googling this topic I see there are several options including images, css, html and javascript. I am not looking for anything fancy, but simple one color boxes with rounded corners preferably without using images, upon which I can overlay some text. I have dreamweaver cs3 and wondering if cs4 does this for you as well. Any thoughts? Quote
daddyalfie Posted July 23, 2009 Report Posted July 23, 2009 (edited) Well, the only way I know how to do it is with "images". I made a "lozenge" in Photoshop, saved it as a .gif image, then (also in Photoshop,) sliced it into three separate images, top, middle and bottom. Then I made three separate divs. "Top", "middle", (with "repeat x" in the CSS, and then "bottom". It makes an expandable div that "grows" as you put more stuff in it. Take a look at http://www.katsfamilyhair.com to see what I did. Hope it helps! Alfie Edited July 23, 2009 by daddyalfie Quote
falkencreative Posted July 23, 2009 Report Posted July 23, 2009 The absolutely easiest way to do this is to use the CSS3 border-radius property. (http://www.css3.info/preview/rounded-border/) However, not all browsers support that yet -- primarily Internet Explorer. It should display correctly in Firefox/Safari/Opera, and display regular square corners in IE. Otherwise, you're best bet is to google and find a method that works for you. As you say, there are a variety of methods out there. If you don't use border-radius, rounded corners is possible without images, but I have found that it tends to lead to unnecessarily messy code. This site gives a good breakdown of the different methods and what is required for each of them (javascript, images, etc.): http://www.smileycat.com/miaow/archives/000044.php Quote
falkencreative Posted July 23, 2009 Report Posted July 23, 2009 You may also want to check out the CSS-Tricks screencast on the subject, which presents a couple different options: http://css-tricks.com/video-screencasts/24-rounded-corners/ Quote
jumpweb Posted July 23, 2009 Author Report Posted July 23, 2009 Thanks so much for responses. I found a technique I think I will use. The suggested tutorials were very helpful. Cheers! Quote
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.