Easy rounded corners…well maybe

MY PARTNER AND I ran across this url that creates spherical corners and makes use of a copy plus paste thing. I make my but this could possibly be an option if you don’t know exactly how. I tried the item and tested in FF2 and IE7 and works in both. I don’t learn about other browsers when I didn’t sense like major examining or anything. Just thought I’d pass it along because a number of people ask about circular corner boxes.

www. curvycorners. net should this too.

Ya find out, it just seems easier, less computer code, and cross browser compatible to generate these with top rated, middle and bottom images in lieu of using js along with complicated code (complicated in my opinion anyway). I’m about to stick with by myself! Although Spiffy proverbial box was pretty simple.

Moz and Safari assist you to create curved factors with CSS solely

http: //www. css3. info/preview/rounded-border/

Great stuff!

Only when IE would jump on this phone!

HTML:
< div id=" roundedContainer" >
< div class=" roundTop" > < img src=" topLeftCorner. gif" class=" corner" /> < /div>
<! --Content will go here-->
< div class=" roundBottom" > < img src=" bottomLeftCorner. gif" class=" corner" /> < /div>
< /div> 

. roundedContainerbackground-color: #xxxxxx;
. cornerwidth: 16px; elevation: 16px; (assumes 16×16 picture)
. roundTop
background-image: url(" topRightCorner. gif" );
background-repeat: no-repeat;
background-position: major right;

. roundBottom
background-image: url(" bottomRightCorner. gif" );
background-repeat: no-repeat;
background-position: underside right;

Limitations/Suggestions:
Whenever you specify a height for that box, this can break.
As well, if you really need to float the pot, this will break too.

However, its a simple and clean knack of making rounded aspects

Fixed these kind of limitations.

HTML:
< div id=" roundedContainer" >
< div class=" roundTop" > < img src=" topLeftCorner. gif" class=" corner" /> < /div>
< div id=" inner1" class=" innerWrapper" >
<! --content here-->
<! --style #inner1 for height, padding, and so on without breaking this
rounded corners-->
< /div>
< div class=" roundBottom" > < img src=" bottomLeftCorner. gif" class=" corner" /> < /div>
< /div> 

.

This entry was posted in Web Design and tagged , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *