Jump to content

rounded div corners in css


Recommended Posts

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.:rolleyes:

Any thoughts?

Link to comment
Share on other sites

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!



Edited by daddyalfie
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...