StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>While your shorthand codes are correct, you're using the incorrect longhand values for proper CSS3. It should not be "border-radius-bottomright", but "border-bottom-right-radius". Mozilla has had an incorrect naming convention for this. The Webkit one is the correct version.</p> <p>Also, be sure to place your vendor-specific versions <em>before</em> the standards versions.</p> <p>You might like to use an online tool to generate them, such as <a href="http://border-radius.com/" rel="nofollow">http://border-radius.com/</a></p> <p>Edit: Start by eliminating absolutely everything (and I do mean EVERYTHING) that is unrelated and add them back in one by one until you see where things go wrong:</p> <pre><code><!doctype html> <body> <div style="border: 1px solid black; border-radius: 10px; padding: 1em;"> Rounded corners </div> </body> </code></pre> <p>Next step would be something like:</p> <pre><code><!doctype html> <style type="text/css"> div#test { border: 1px solid black; border-radius: 10px; padding: 1em; } </style> <body> <div id="test"> Rounded corners </div> </body> </code></pre> <p>etc. It's definitely a bug in the code that you <em>haven't</em> posted.</p> <p>Yet another edit: It's caused by the <code>filter:progid:DXImageTransform.Microsoft.gradient(...);</code>, which operates on the entire element, ignoring the rounded corners. Remove the filter declaration and either don't have a gradient background or use an image (SVG if you want to have proper gradients, PNG otherwise) and you'll see rounded corners.</p> <p>Moral of the story: always eliminate everything else, in case you have a strange CSS issue like this. Start with the absolute minimum styles and add in the other ones until the issue manifests itself. Things can interact badly.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload