Jump to content
  • Checkout
  • Login
  • Get in touch


The e-commerce.

Round Corners at 'bottom' of infoboxes


Recommended Posts

Hi All,


Been searching for this for a while, and contacted a few website owners that have the look i want but to no avail.


I have read through the posts and most of them address the issue of using the rounded .gif images for the top corners of info boxes by switching statements (true, false etc) in the boxes folder, however this does not address the qeury i have.


I am going to be using image headers for my infoboxes which are similar to my buttons (this is on my unreleased site so looking at my live shop wont help)....therefore these have round edges, i would like the bottom of my tables to have rounded corners also.


I have searched the web for info on rounding the corners of tables and found this:


CSS3 defines a property called border-radius, however, Mozilla is among one of the first (and only) browsers that supports it so far and uses a vendor-specific prefix (-moz-border-radius) until it becomes more widely supported. Here's an example of an element with a rounded border:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
	<div style="-moz-border-radius: 10px; border: solid 1px #000; height: 100px; width: 250px;"></div>

This can easily be applied to tables or other elements, I just used a <div> element for an example. Note, however, as mentioned before, only Mozilla supports this as of now so it will fail in other browsers such as IE (of course) and Opera. CSS3 is going to have more a lot of more cool stuff like this, check out the CSS3 Roadmap.


Which obviously doesn't address the issue as i know it is possible in IE. Can anyone help?


Best Regards



Link to comment
Share on other sites


This topic is now archived and is closed to further replies.

  • Create New...