Member Avatar for veledrom

Hi,

I have a transparent circle (20X20) in PNG format. I want to use it to make a DIV or TABLE with rounded edges. How can I do it with CSS?

I tried with some examples but none of them were cross-browser compatible.

Thanks

  • 2 Contributors
  • 5 Replies
  • 93 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by simplypixie

Dani AI

Generated

As noted you already have a 20x20 PNG and, as hinted, the easiest modern approach is CSS rather than image tricks. Use CSS3 border-radius for clean, cross-browser rounded corners; it is widely supported in current browsers (see MDN border-radius and compatibility at Can I use). Example:

.box {
  background: #fff;
  padding: 12px;
  border-radius: 8px;
  -webkit-border-radius: 8px; /* historic mobile/webkit */
  -moz-border-radius: 8px;    /* historic Firefox */
  overflow: hidden;           /* clips children to rounded shape */
}

If you must use the single 20x20 PNG as corner art (for a specific visual style), a simple modern trick is CSS multiple backgrounds to place that image in each corner:

.box {
  background-image: url(circle20.png), url(circle20.png),
                    url(circle20.png), url(circle20.png);
  background-position: left top, right top, left bottom, right bottom;
  background-repeat: no-repeat;
  padding: 16px; /* leave room so corners don't overlap content */
}

Notes and troubleshooting: multiple backgrounds require IE9+/modern browsers; for older IE (6–8) use conditional markup with four absolutely positioned corner elements or accept square corners. PNG transparency problems in ancient IE are historical—unless supporting IE6 is required, prefer graceful degradation. For precise cross-browser details and fallbacks consult the MDN and Can I use pages above.

Recommended Answers

All 5 Replies

Member Avatar for simplypixie

I can't remember which but some older versions of IE don't like PNG images and you need to use a workaround for them (I remember doing this with a couple of sites but it was a couple of years ago so can't remember how) - that may be your problem.

Member Avatar for veledrom

Another gift from Microsoft!

Member Avatar for simplypixie

If you Google PNG in IE6 you will find solutions

Member Avatar for veledrom

Guys don't worry about the PNG. I can use any image just the CSS code I need.

Thanks

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.