Member Avatar for 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...

  • 4 Contributors
  • 4 Replies
  • 116 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by harsh93

Dani AI

Generated

Thread summary and modern guidance: the original request asked for rounded corners without image slices. and pointed toward the native CSS solution, and offered a JavaScript shim for shaded borders. Today the simplest, most future‑proof approach is to rely on the CSS border‑radius model as progressive enhancement — current browsers handle it without hacks. For compatibility data and syntax details see the authoritative references on the feature (MDN border-radius) and live support tables (Can I Use).

Support strategies for older IE: when IE6–8 must match the rounded look, there are three practical choices — accept square corners in legacy IE, provide image-based corners only for those old browsers via conditional styles, or use a helper that backports CSS3 (for example, CSS3PIE). CSS3PIE can add border-radius and a few other CSS3 features to older IE, but it requires correct deployment (serve the helper from the same origin, set the right MIME type, and follow the project notes). A JS-based renderer like the one mentioned is useful if complex shadows or nonstandard shapes are needed, but modern CSS (box-shadow, gradients) reduces that need.

Practical tips and pitfalls: rounded corners clip child overflow, so when content must be contained use overflow:hidden on the rounded element; applying a radius directly to images usually yields the cleanest result for rounded thumbnails; mixing borders, background gradients and shadows can expose browser quirks so test across targets. Treat rounded corners as a visual enhancement — graceful degradation (square corners) for legacy agents is often the simplest, most maintainable route. For implementation details and deployment caveats, consult the MDN and CSS3PIE documentation linked above.

Recommended Answers

All 4 Replies

Member Avatar for 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

shadedborder-0.6_.2_.zip (19.33 KB)
Member Avatar for Member #120589

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.

Member Avatar for harsh93

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

Thanks again/...

ok
Byeee

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.