Click here to Skip to main content
13,045,248 members (41,419 online)
Rate this:
Please Sign up or sign in to vote.
I want to round the edges of a table. I use a code to achieve this.

This is the relevant CSS code.

#table-list {
    border: 1px solid #e3e3e3;
    background-color: #f2f2f2;


Html code of its is mentioned below.

<table width="383" id="table-list">

but it didn't give rounded edges. Is any error in that code?? Please help me, if you know. Thank you.
Posted 5-Jun-12 5:48am
Updated 5-Jun-12 5:49am

1 solution

Rate this: bad
Please Sign up or sign in to vote.

Solution 1

Here is the code sample I made:
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css"><!--
            table {
                        -webkit-border-radius: 20px 20px 20px 20px; -moz-border-radius: 20px 20px 20px 20px; border-radius: 20px 20px 20px 20px;
                        background-color:#ACE34D; padding:8px;
            td {
                        border: thin solid; padding-left:2em; padding-right:2em; 
                        -webkit-border-radius: 20px 20px 20px 20px; -moz-border-radius: 20px 20px 20px 20px; border-radius: 20px 20px 20px 20px;
<tr><td>Some data</td><td>More data</td><td>&nbsp;&hellip;&nbsp;</td></tr>
<tr><td>Some data</td><td>More data</td><td>&nbsp;&hellip;&nbsp;</td></tr>

It works, tested.

I did it with the help of this rounded corner generator:[^], added my own styles to make it look acceptable, without intersections of the borders and with proper padding.

See also:[^],[^].

The trick is to meet the requirements of different layout engines at once.

Tim Corey 5-Jun-12 13:22pm
When you create something like this, testing it in jsFiddle is a great way to be sure it works. You can also then share the URL with the OP so that they can see it in action right away. Just a thought. +5 from me.
SAKryukov 5-Jun-12 13:26pm
Thank you for the good advice, Tim.
As to sharing the URL -- to me, it's too much buzz for such a simple question. Anyone who is interested can use copy/paste from this page into some HTML file to see the effect it no time.
VJ Reddy 5-Jun-12 13:24pm
Nice answer. 5!
SAKryukov 5-Jun-12 13:27pm
Thank you, VJ.
Jeremy Shin Woo 5-Jun-12 13:37pm
SAKryukov 5-Jun-12 14:59pm
You are very welcome.
Good luck, call again.
losmac 5-Jun-12 14:57pm
Good work! +5!
SAKryukov 5-Jun-12 14:59pm
Thank you, Maciej.
thatraja 5-Jun-12 15:24pm
My 5! Already you used the same links herebefore, nice links.
SAKryukov 5-Jun-12 15:31pm
Yes, I did -- they are useful. Thank you, Raja.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy | Mobile
Web02 | 2.8.170713.1 | Last Updated 5 Jun 2012
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100