Rounded corners.

[harsh93]

Hi everyone...

I m designing the web-site right now.
But one proble is to make the corners rounded.

I dont want the css help which call the image as rounded corner....
Is there any css you know which directly rounded the corners in the page...

Thanks .
With regards...

[mohammed yaghi]

Sure you can
1- include this file

<script type="text/javascript" src="shadedborder.js"></script>

2- write your Css as follow

<style type="text/css">
/* <![CDATA[ */

/* One simple border definition */
#my-border { padding:20px; width:30%; margin:200px auto; color:#fff; }
#my-border, #my-border .sb-inner { background:#444 url(grad.png) repeat-x; }


/* The following is just for making the page look "cool" - simply ignore it */
html { font-family:sans-serif; background:#444; color:#ddd; }
html, body { margin:0; padding:0; }
p { margin:5px 0; }
.headfoot { text-align:right; padding:10px; margin:0; }
.headfoot h1 { font-size:1.3em; padding:0; margin:0; }
.headfoot a { color:#fff; }
#content { background:url(back.jpg); padding:10px 0; }

/* ]]> */
</style>

3- make div including all page contents with id ="my-border"

4- write this code in body

<script language="javascript" type="text/javascript">
    var myBorder = RUZEE.ShadedBorder.create({ corner:8, shadow:16 });
    myBorder.render('my-border');
  </script>

attached
complete project

[Asiic]

-moz-border-radius for FF
-webkit-border-radius for Chrome
there is none for IE
http://www.the-art-of-web.com/css/border-radius/

but alternatively you can use this CSS trick for rounded corners w/ no images
http://www.ajaxapp.com/2008/06/10/round-corners-with-css-only-without-images/

hope this helps

IE is a crap browser, but there again we all know that right?

My solution would be:

-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;

This should work in all browsers except IE. IE9 should support the last statement. The multiple div/tag solution for IE is horrible, although I have used it in the past. Anything that means you have to change the HTML or include presentational markup is evil in my book. I would suggest that you just ignore rounded corners for IE. Will it break the site? If all your corners are 'border-radiused' as opposed to static images or js-induced rounding, then the IE view shouldn't look too bad.

[harsh93]

thanks for your great reply regarding the rounded corner css..

Thanks again/...

ok
Byeee