Border radius is not appearing in CSS

Question

I have a CSS file in that a table is declared, i want to add curved edge. if i try border-radius its not coming at all. This is the code

table.display {
    margin: 0 auto;
    clear: both;
    width: 100%;
}

Check [this](http://stackoverflow.com/questions/628301/css3s-border-radius-property-and-border-collapsecollapse-dont-mix-how-can-i) and [this](http://stackoverflow.com/questions/1407371/webkit-and-moz-border-radius-does-not-work-on-tables) — Vimal Stan, Apr 16 '13 at 06:56
Refer this page : http://www.w3schools.com/cssref/css3_pr_border-radius.asp — John Peter, Apr 16 '13 at 07:02
John in my css border-radius property not supported error is coming — Naruto, Apr 16 '13 at 07:06
possible duplicate of [CSS - border-radius doesn't display in IE6/7/8](http://stackoverflow.com/questions/1285014/css-border-radius-doesnt-display-in-ie6-7-8) — Jukka K. Korpela, Apr 16 '13 at 07:09
Which kind of developer uses IE8 as main browser ? Not even at Microsoft :/ — Andrea Ligios, Apr 16 '13 at 08:06

score 2 · Answer 1 · answered Apr 16 '13 at 06:57

2

Try this Css

table.display {
    margin: 0 auto;
    clear: both;
    width: 100%;
    border :1px solid #000;
    border-radius :5px;
    -moz-border-radius :5px; 
    -o-border-radius :5px;
    -webkit-border-radius :5px;
}

Here is the jsfiddle LINK

answered Apr 16 '13 at 06:57

Sieryuu

1,510
2
16
41

i'm getting black border but no round edges :( – Naruto Apr 16 '13 at 07:01
What browser do you use? – Sieryuu Apr 16 '13 at 07:01
is there any way to load images particular to border? – Naruto Apr 16 '13 at 07:02
If you want support for – Arkana Apr 16 '13 at 07:07
The border-radius property is supported in IE9+, Firefox 4+, Chrome, Safari 5+, and Opera. – Sieryuu Apr 16 '13 at 07:08
can you please tell me how to load images fit to border – Naruto Apr 16 '13 at 07:08
Post some of your code will help – Sieryuu Apr 16 '13 at 07:14
1

@LLL Image Takes so time to load so use border-radius. – Pawan Lakhara Apr 16 '13 at 07:15
I suggest you to use a better browser to run css3 – Sieryuu Apr 16 '13 at 07:18

score 1 · Answer 2 · answered Apr 16 '13 at 06:55

1

There should be either border color or background color to apply the radius

HTML

<table class="display">
    <tr>
        <td>table</td>
    </tr>
    </table>

CSS

table.display {
    margin: 0 auto;
    clear: both;
    width: 100%;;
    color:white;
    background:green;
    border-radius:6px
}

DEMO

answered Apr 16 '13 at 06:55

Sowmya

26,684
21
96
136

HI Soumya, thanks for ur reply. but in my css its saying border radius property is not appearing. :( – Naruto Apr 16 '13 at 06:57
tat is coz u dont have border-radius in your css – Sowmya Apr 16 '13 at 06:58
Yup, how to solve this problem, in this case how can i add curved edges to my table – Naruto Apr 16 '13 at 06:59
@LLL please update your IE. Because the border-radius Property works in IE 9 and Upper version. and replace your CSS to above CSS. – Pawan Lakhara Apr 16 '13 at 07:13

Border radius is not appearing in CSS

2 Answers2