I am simply stuck and there has to be an easy way to get this done. I've got an HTML table that has 3 columns. Well, as you can see in the image, I'm trying to style the headers with the border-radius property. What I want is for that header to span across all three columns but only have the top-left and top-right corners use the border-radius property. The parts I circled in green I would like to have no border radius there, just flat.
Am I going about this the wrong way or is there an easier way to do this?
Maybe you can assign a id or a class to the topleft and topright table cells and then use the border-top-left-radius and the border-top-right-radius properties to only the topleft and right corners are rounded.
You can either use classes on the top/left and top/right cells as @Bob mentioned, or target them using :first-child and :last-child pseudo-selectors, as in this example:
Am I going about this the wrong way or is there an easier way to do this?
http://imageshack.us/f/3/31933194.png/
http://jsfiddle.net/pLgmL/