CODEWITHSUNDEEP
cssrounded-corners
Moon
Moon

Reputation: 20002

CSS Rounded Corner Divs

How do I make only one or two or three corners of a div round?

Upvotes: 8

Views: 3970

Answers (4)

Sumit patel
Sumit patel

Reputation: 3903

use of border-radius

border-radius:5px;

further Link

Upvotes: 0

Trufa
Trufa

Reputation: 40717

Here is a great resource that you can find helpful to do it for you and to learn.

http://borderradius.com/

Good luck!

Well to answer you question (apart from the tool):

One corner (top left):

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

Two corners (top left and 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;

Three corners (top left and right and bottom right)

-webkit-border-radius: 10px;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius: 10px;
-moz-border-radius-bottomleft: 0;
border-radius: 10px;
border-bottom-left-radius: 0;

And so on...

All a 10px radius, very easily done with the tool I recommend.

BTW: Don't miss idlefingers' answer, very good resource!!

See also: Creating rounded corners using CSS

Upvotes: 4

egrunin
egrunin

Reputation: 25053

None of the other answers work with IE8, so here's a link with many possible solutions:

DevWebPro

Upvotes: -1

idlefingers
idlefingers

Reputation: 32037

Specify the corners you want:

border-top-left-radius: 10px 5px;
border-bottom-right-radius: 10% 5%;
border-top-right-radius: 10px;

http://www.css3.info/preview/rounded-border/

Upvotes: 14

Related Questions