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>
Allen PittsBusiness analystAsked:
Who is Participating?
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.
0
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
0
Allen PittsBusiness analystAuthor Commented:
Hello Paul,

Using IE 10

Allen
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy 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

0
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
0
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
0
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
0
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

0

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
0
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
0
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.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.