CSS Rounded Corner Divs

Question

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

Warning: none of the solutions so far offered works with IE <= 8. — egrunin, Dec 13 '10 at 17:55
@egrunin Have you discovered a CSS corner rounding method that *does* work with versions of IE before 9? — jball, Dec 14 '10 at 16:30
@egrunin: IE's use slowly decreasing' still for solution you have to include "pie.htc" file to modify\upgrade the behavior of the browser... take a look at the following links as well they show some usage stats... — Moon, Dec 15 '10 at 14:09
in cases when you have carefully thought about you target audience\users.... these stats can help you avoid a lot of complexity — Moon, Dec 15 '10 at 14:12

score 14 · Accepted Answer · answered Dec 13 '10 at 17:49

14

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/

answered Dec 13 '10 at 17:49

idlefingers

31,659
5
82
68

Alternatively for three rounded corners, round all the corners (`border-radius: 15px;`) and then turn rounding off on the corner you don't want it on (`border-top-left-radius: 0px;`). – jball Dec 13 '10 at 17:51

score 4 · Answer 2 · edited May 23 '17 at 12:15

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

@joksnet I actually didn't know about it but it look great!! I'll give it a go! — Trufa, Dec 13 '10 at 17:53
Also check egrunin's answer that will give you options if you want to see other option that might be more compatible. — Trufa, Dec 13 '10 at 18:03

score 0 · Answer 3 · answered Aug 10 '16 at 13:16

0

use of border-radius

border-radius:5px;

further Link

answered Aug 10 '16 at 13:16

Sumit patel

3,807
9
34
61

score -1 · Answer 4 · answered Dec 13 '10 at 17:59

-1

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

DevWebPro

answered Dec 13 '10 at 17:59

egrunin

24,650
8
50
93

@Akinator: i chose on First come first Serve basis... still A lotta lotta lotta thanks for the code... – Moon Dec 14 '10 at 08:51
@Junaid Saeed No problem! Glad to help and I think you made the right choice! :) – Trufa Dec 14 '10 at 11:51
As far as I can see, all the solutions there are fundamentally different from corners rounded with CSS in that you need to create images to handle different radii, borders, background-colors, etc. The reason that rounding corners with CSS is great is that it frees you from lots of extra divs and graphics creation, which these solutions do not... – jball Dec 14 '10 at 16:35

CSS Rounded Corner Divs

4 Answers4