Round corner of a box by CSS

Question

0.00/5 (No votes)

See more:

1. None of the Above colors are making my corner rounded in mozila.
-moz-border-radius: 10px 10px 10px 10px;

OR

-moz-border-top-left-radius:10px; /* top left corner */
-moz-border-top-right-radius:10px; /* top right corner */
-moz-border-bottom-left-radius-:10px; /* bottom left corner */
-moz-border-bottom-right-radius:10px; /* bottom right corner */

help me with some other code which can give same result.

Posted 27-Mar-13 6:34am

MalwareTrojan

Updated 27-Mar-13 6:51am

v2

Add a Solution

Comments

Monster Maker 27-Mar-13 12:36pm

For round corners, you can try border-radius property..!

2 solutions

Solution 2

Unfortunately, you have to have a cross-browser CSS (so, Solution 1 is not a quite a valid solution, you should not have accepted it formally, it won't work for different browsers; I'm not sure the claim in the last sentence is correct, but does work on latest Gecko (Mozilla), but it would not work on earlier versions).

The solution is well-known. I would advice to use one of the rounded-corner generators to obtain required CSS: http://cssround.com/[^].

You can refer to the layout engine comparison to see what features are supported by which:
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28CSS%29[^],
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML5%29[^].

—SA

Posted 27-Mar-13 9:23am

Sergey Alexandrovich Kryukov

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Style-7 · Accepted Answer · 2013-03-27T06:51:00

CSS

.btn{
  background-color: #F6F6F6;
  border: 1px solid #AAAAAA;
  font-size: 18px;
  padding: 4px 10px 5px 10px;
  margin: 0px 5px 0px 0px;
  border-radius: 2px;
}

see example on my site http://catalogofsoftware.com/[^]

This is not working in IE 8, but working in Chrome, Opera, Mozilla FireFox.