Click here to Skip to main content
11,714,345 members (81,631 online)
Rate this: bad
Please Sign up or sign in to vote.
See more: Javascript PHP CSS3 HTML5
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
Edited 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 at 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 at 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 at 5-Jun-12 13:24pm
Nice answer. 5!
SAKryukov at 5-Jun-12 13:27pm
Thank you, VJ.
Jeremy Shin Woo at 5-Jun-12 13:37pm
SAKryukov at 5-Jun-12 14:59pm
You are very welcome.
Good luck, call again.
losmac at 5-Jun-12 14:57pm
Good work! +5!
SAKryukov at 5-Jun-12 14:59pm
Thank you, Maciej.
thatraja at 5-Jun-12 15:24pm
My 5! Already you used the same links herebefore, nice links.
SAKryukov at 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
0 Sergey Alexandrovich Kryukov 420
1 Maciej Los 229
2 Richard MacCutchan 220
3 OriginalGriff 170
4 F-ES Sitecore 140
0 Sergey Alexandrovich Kryukov 545
1 CHill60 375
2 Maciej Los 324
3 Richard MacCutchan 310
4 OriginalGriff 260

Advertise | Privacy | Mobile
Web01 | 2.8.150819.1 | Last Updated 5 Jun 2012
Copyright © CodeProject, 1999-2015
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