I'm having some trouble with -webkit-gradient conflicting with -webkit-border-radius. Both the styles below are applied to a table, identified by its id. They each work individually, but in combination, the gradient cancels out the corner radius, irrespective of order in the stylesheet.

background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#ccc), color-stop(0.3, #eee));
-webkit-border-radius:10px;

I have the same problem using border-radius. Cross-browser support isn't essential, since this is intended for iPhone only.

Thanks in advance for any advice you can offer.

Ross

11 answers

2
points
This was chosen as the best answer

this is the best I can come up with: test 3

it needs the styling on the td cells, and a class to radius first and last.

rough and ready, but I think that's what you mean?

Answered over 7 years ago by Tony Crockford
1
point

Hmm, it's looking fine to me using a blank div. Maybe it's your table that's causing problems? What happens when you try it on a div or any other element?

Answered over 7 years ago by Stuart Memo
1
point

ah, it looks like you can't radius the rows - and they are square so sit over the table border.

see: test2

where I've tried to border the tr -I don't think table rows take kindly to CSS.

could you do it without a table? Or style the table cells perhaps?

experimenting shows that setting border-collapse to collapse on the table will lose any radius on a border, even if the cells are radiused too.

perhaps explain the effect you need and there might be a better method to get it?

Answered over 7 years ago by Tony Crockford
1
point

Cracked it!

It seems that you can't style the tr element very usefully. So, with some crafty CSS selectors, it's possible to style the corner td/th elements to get the necessary rounded corners. It even works when the table is set to border:collapse;.

<table id="week">
        <tr>
            <th></th><th>1</th><th>2</th><th>3</th><th>4</th>
        </tr>
        <tr>
            <td>M</td><td>X</td><td>X</td><td>X</td><td>X</td>
        </tr>
        <tr>
            <td>T</td><td>X</td><td>X</td><td>X</td><td>X</td>
        </tr>
        <tr>
            <td>W</td><td>X</td><td>X</td><td>X</td><td>X</td>
        </tr>
        <tr>
            <td>T</td><td>X</td><td>X</td><td>X</td><td>X</td>
        </tr>
        <tr>
            <td>F</td><td>X</td><td>X</td><td>X</td><td>X</td>
        </tr>
        <tr>
            <td>S</td><td>X</td><td>X</td><td>X</td><td>X</td>
        </tr>
        <tr>
            <td>S</td><td>X</td><td>X</td><td>X</td><td>X</td>
        </tr>
    </table>

And the crucial CSS:

#week tr {
background-image: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#ccc), color-stop(0.3, #eee));
}
#week tr:first-child th:first-child{
-webkit-border-top-left-radius: 10px;
}
#week tr:first-child th:last-child{
-webkit-border-top-right-radius: 10px;
}
#week tr:last-child td:first-child{
-webkit-border-bottom-left-radius: 10px;
}
#week tr:last-child td:last-child{
-webkit-border-bottom-right-radius: 10px;
}

Thanks for all your help, chaps. Much appreciated.

Answered over 7 years ago by Ross McFarlane
0
points

Hi Ross, I think you might've just made a typo! The element should be -webkit-border-radius, not -webkit-corner-radius. Just tried it out and it works fine.

Answered over 7 years ago by Stuart Memo
0
points

You're right, but I'm afraid the typo was only in the question, not in the code. The problem remains!

Answered over 7 years ago by Ross McFarlane
0
points

I should clarify

Answered over 7 years ago by Ross McFarlane
0
points

I just made a demo and it looks okay to me.

you have any other CSS that might be breaking it?

is the code valid?

here's my working snippet: test

Answered over 7 years ago by Tony Crockford
0
points

Hi Tony,

Your code works with me, too. The trouble is that I'm trying to crop the gradient background within the rounded border.

Your versions renders the gradient inside a box, which is in turn inside a rounded box.

I hope that's clear

Answered over 7 years ago by Ross McFarlane
-2
points

delete

Answered over 7 years ago by Tony Crockford
-2
points

delete

Answered over 7 years ago by Tony Crockford