Curve endged of div tags using Html and css

Question

Is it possible to bring curve edges to divs using html and css only...without using images.

Answer 1

Yes, it is possible, but it is a CSS 3 feature that may not work on all browsers (or not the same in all browsers). See this article for an example.

Answer 2

Not in a way that's compatible cross browser (in particular, IE does not yet support it). In CSS 3, you can use border-radius, which Safari and Firefox support currently as -webkit-border-radius and -moz-border-radius. For example

<div style="-moz-border-radius: 10px; 
            -webkit-border-radius: 10px;
            border-radius: 10px;
            border: 1px solid #000; 
            padding: 10px;">
  This is a sample div.
</div>

Answer 3

I assume you mean border-radius. Yes, it is possible in proper browsers (not IE) with border-radius. As it's a CSS3 property, it's not yet properly implemented and you need to do some trickery to make it work:

-moz-border-radius: 10px; /* for firefox */
-webkit-border-radius: 10px; /* for safari & chrome */
border-radius: 10px; /* for others (opera) */

Take a look at http://www.css3.info/preview/rounded-border/ for more info.

Answer 4

Yeah, it, certainly, is technically possible (the best kind of possible, I guess), here is an example (be sure to check the source, it really is a cool technique).