CODEWITHSUNDEEP
css
Ting Ping
Ting Ping

Reputation: 1145

CSS style: Curvature of the table's edge (top only)

I am trying to make the top left and top right end of the table circular, but applying the following code will also make the bottom left and bottom right circular. Any idea how to fix it?

/* sets the curvature of the box */
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;

Upvotes: 0

Views: 141

Answers (4)

grvpanchal
grvpanchal

Reputation: 186

Use the following code and it will work

-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;

Upvotes: 0

Kevin Bowersox
Kevin Bowersox

Reputation: 94499

You can specify each corner of the border with this property. It goes as follows:

border-radius: [top-left] [top-right] [bottom-left] [bottom-right]

border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;
-o-border-radius: 10px 10px 0px 0px;

Upvotes: 1

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32202

Used to this 

border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
-o-border-radius: 10px 10px 0 0;

Upvotes: 2

Curtis
Curtis

Reputation: 103388

Specify just top left and top right:

-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;

border-radius.com is a useful quick tool for creating border radius this way.

Upvotes: 3

Related Questions