Table rounded

Get Started
1

hello!

I want to know how to do Table with rounded corners?

thanks galia

2

border-radius


<style>
    table {
        border: 1px solid black;
        border-radius: 5px;
    }
</style>

<table>
    <tr>
        <td>So much</td>
        <td>round borders</td>
    </tr>
</table>
3

hello!

thanks i try this

thanks galia

4

Probably should add browser types to that.

<style type="text/css">
    table {
        border: 1px solid black;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
    }
</style>
5

hello!

were and what do you mean?

thanks galia

6

Well in your style sheet of course.
See this.

7

I don’t think this is very relevant any more.

It’s been supported on Chrome, Firefox, and Safari for a while now.

Off Topic:

shrug I personally like not supporting older browsers for features like this. I think it should still function, but not look as good. People need to upgrade. The css-tricks article has those extra things dating back to browser from 2008.

8

hello!

what you suggest at first can it work on ie and chrome without any code for this browser and why i need a code for browser

thanks galia

9

The code he suggested makes it compatible with older browsers. However, those browsers are fairly old and I personally don’t believe in supporting them if possible… especially for things that are simply things that look a little nicer. I don’t think they deserve nicer! :lol:

Though, he’s technically right and it wouldn’t hurt to include the compatibility.


.round {
  /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -webkit-border-radius: 12px;

  /* Firefox 1-3.6 */
  -moz-border-radius: 12px;

  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
  border-radius: 12px;
}

Taken from Drummin’s link. http://css-tricks.com/almanac/properties/b/border-radius/