CSS rounded corners

Hello expert,

Working on using GIFs to create containers with rounded corners.
then I found
http://www.w3schools.com/css/css3_borders.asp

Tried copying parts of the code into my page but could not get it to work.
So copied the whole page into a blank page. (Copied herewith below)
Still no luck.

Why does it work on W3 site but not when I open the file with the
browser?

Thanks.

Allen in Dallas

<!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
    border-radius: 25px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;    
}

#rcorners2 {
    border-radius: 25px;
    border: 2px solid #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;    
}

#rcorners3 {
    border-radius: 25px;
    background: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px;
    width: 200px;
    height: 150px;    
}
</style>
</head>
<body>

<p>The border-radius property allows you to add rounded corners to elements.</p>
<p>Rounded corners for an element with a specified background color:</p>
<p id="rcorners1">Rounded corners!</p>
<p>Rounded corners for an element with a border:</p>
<p id="rcorners2">Rounded corners!</p>
<p>Rounded corners for an element with a background image:</p>
<p id="rcorners3">Rounded corners!</p>

</body>
</html>
LVL 1
Allen PittsBusiness analystAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Paul MacDonaldDirector, Information SystemsCommented:
Works fine for me.  What browser(s) are you using to test the page?  I used the most recent vesions of Chrome and Firefix on Windows 7.

Edit:  The last one "doesn't show" because the .gif isn't available, but the first two work just fine.
Prasadh BaapaatWeb Designer & DeveloperCommented:
as Paul said... it works fine for me too... checked in IE Edge, Firefox, Chrome and Safari all latest versions.

your browser may be an older version one...

replace line:
border-radius: 25px;

with below lines in all 3 CSS styles
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
-khtml-border-radius: 25px;
border-radius: 25px;

Open in new window

check in your browser now.

thanks,
Prasadh
Allen PittsBusiness analystAuthor Commented:
Hello Paul,

Using IE 10

Allen
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Pierre FrançoisSenior consultantCommented:
There is a bug in IE 10.

For making the round corners work, you have to use a workaround

Instead of:
border-radius: 25px;

Open in new window


you have to use:
border-top-left-radius:25px;
border-top-right-radius:25px;
border-bottom-left-radius:25px;
border-bottom-right-radius:25px;

Open in new window

Allen PittsBusiness analystAuthor Commented:
Hello Pfrancois and Pradsadh

Have tried
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>border 2</TITLE>
<style>
body { font-family: arial;}
#rcorners2 {
     border-top-left-radius:25px;
       border-top-right-radius:25px;
       border-bottom-left-radius:25px;
     border-bottom-right-radius:25px;
     border: 2px solid #8AC007;
     padding: 20px;
     width: 200px;
     height: 150px;
 }
</style>
</HEAD>
<BODY>
<p id="rcorners2">Rounded corners</p>
</BODY>
</HTML>

and

<HTML>
<HEAD>
<TITLE>border 2</TITLE>
<style>
body { font-family: arial;}
#rcorners2 {
   -moz-border-radius: 25px;
   -webkit-border-radius: 25px;
   -khtml-border-radius: 25px;
      border-radius: 25px;
     border: 2px solid #8AC007;
     padding: 20px;
     width: 200px;
     height: 150px;
 }
</style>
</HEAD>
<BODY>
<p id="rcorners2">Rounded corners</p>
</BODY>
</HTML>

Neither seem to work.

Allen in Dallas
Prasadh BaapaatWeb Designer & DeveloperCommented:
Well it is strange.... I mean I can see both the styles working...

here is a screenshot of IE Edge - the page is made by code you pasted in above comment.

css
Prasadh BaapaatWeb Designer & DeveloperCommented:
is this problem occurring in ONLY one browser (IE 10) on your machine?

means have you checked the page in diff browsers like Chrome or Firefox on your machine?

if not... download Chrome or Firefox.. install on your machine and then check and let me know if it still dont see rounded corners.

thanks,
Prasadh
Prasadh BaapaatWeb Designer & DeveloperCommented:
Try this:
<HTML>
<HEAD>
<TITLE>border 2</TITLE>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
body { font-family: arial;}
#rcorners2 {
   -moz-border-radius: 25px;
   -webkit-border-radius: 25px;
   -khtml-border-radius: 25px;
      border-radius: 25px;
     border: 2px solid #8AC007;
     padding: 20px;
     width: 200px;
     height: 150px;
 }
</style>
</HEAD>
<BODY>
<p id="rcorners2">Rounded corners</p>
</BODY>
</HTML>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Allen PittsBusiness analystAuthor Commented:
Hello Prasadh,

the <meta...>
tag makes the difference.

Thanks.

Allen
Prasadh BaapaatWeb Designer & DeveloperCommented:
I am happy it worked for you :)

one more thing I observed is that the CSS Style you are using is a ID... make it a CLASS so you can use it multiple times in the page.

just add a . in place of the # before the style name.

thanks,
Prasadh
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.