Member Avatar for Stefano Mtangoo

I need to make <div> </div> to have rounded corner.
I wonder what other technique than putting rounded image at corner can be used to make them round. Is it Javascript or what? CSS?

Look at this site with rounded corners

I don't want to use CMS like joomla or whatever

  • 7 Contributors
  • 13 Replies
  • 204 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by SKANK!!!!!

Dani AI

Generated

Short practical answer: use CSS3’s border-radius for rounded corners; it’s the cleanest, most performant approach today and is part of the CSS spec. The example site in the thread uses corner images (as pointed out), which was the usual workaround before broad CSS3 support. Modern browsers (Chrome, Firefox, Safari, Edge) implement border-radius natively; only very old IE (IE8 and earlier) lacks support, so plan for progressive enhancement or a fallback for legacy users. (developer.mozilla.org)

Minimal, practical CSS pattern (keeps children clipped to the curve):

.rounded {
  background: #fff;
  border-radius: 8px;
  overflow: hidden; /* ensures child content is clipped to the rounded corners */
}

No vendor prefixes are required for current mainstream browsers, though older mobile/legacy browsers historically used -webkit-/-moz- prefixes—check compatibility if supporting very old devices. The overflow note above matters because a parent with overflow: visible may not clip absolutely positioned children to the rounded corner. (developer.mozilla.org)

Fallback and compatibility options (ties back to earlier replies by , and ): prefer progressive enhancement — deliver border-radius everywhere and accept square corners in ancient browsers. If matching the rounded look in IE6–8 is mandatory, options include corner-slice PNGs (the OP’s approach), SVG rectangles, or legacy polyfills (e.g., historical tools like CSS3 PIE) — the polyfill route needs careful testing for performance and path/behavior quirks. Use feature detection (Modernizr) to conditionally apply fallbacks only when needed. (hongkiat.com)

Quick troubleshooting pointers (common traps raised across the thread): rounded corners won’t appear if border-collapse: collapse is used on tables (apply rounding to td or wrap the table), stacked/positioned children can “leak” unless the parent clips, and background images may require background-clip adjustments. For many sites the simplest, most robust approach remains CSS border-radius plus a graceful fallback for legacy IE. (stackoverflow.com)

Recommended Answers

All 13 Replies

Member Avatar for Member #120589

Rounded corners can also be applied via JS, but you'd be better off looking at a pure css/html solution. Try, if possible, to keep the integrity of your html and not include too much 'design' markup. Including loads of divs and spans make for really messy markup.

Tell you what - try Google > "rounded corners" css. You'll be amazed that there are webpages with this very info available for free. ;)

Edited by Member #120589 because: n/a
Member Avatar for edwinhermann

The site you showed uses images. Here's one of the rounded corner images on that site:

Rounded corners (other than by images) is something that is part of CSS3. Check out http://www.w3.org/TR/css3-background/

Member Avatar for jbennet

javascript and CSS here, its not Ie6 friendfly though.

Member Avatar for Stefano Mtangoo

Thanks guys,
I wanted to know the technique behind rounded corners

Member Avatar for Member #120589

The site you showed uses images. Here's one of the rounded corner images on that site:

Rounded corners (other than by images) is something that is part of CSS3. Check out http://www.w3.org/TR/css3-background/

This CSS3 technique (border-radius) works fine for Mozilla/webkit browsers, but not IE (not even IE8 - as far as I know). IE requires a 'fallback' method which probably includes extra markup - be it divs or spans.

See http://www.css3.info/preview/rounded-border/ if you're interested in CSS3, but don't mind ignoring IE.

Member Avatar for Ezzaral

Agreed that this is more of a HTML/CSS question. Moving it over there. Carry on :)

Member Avatar for Stefano Mtangoo

Agreed that this is more of a HTML/CSS question. Moving it over there. Carry on :)

Thanks buddy,
its is not a problem, since I know now it is CSS issue. Should I post to JavaScript forum too, seeing that there is some JS ;)

Member Avatar for SKANK!!!!!

i wouldnt advise doing this simple task in javascript. most like plain and simple tables with backgroud images will do the trick. css. no javascript. if u want to see a sample of my previous workk u can pm me for the screenshot

Member Avatar for Stefano Mtangoo

if you will post a code here it will help others searching for the same thing

Member Avatar for SKANK!!!!!

simple

Member Avatar for Stefano Mtangoo

Man that is big! Really big!!!!!!
I love the simplicity and power of that tutorial ;)

Member Avatar for SKANK!!!!!

yeah i love paint.net
i got it for free too! where ive seen most people have to buy it because they dont know its free LOL

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.