Rounded Corners Not Working

DoubleDee · October 2, 2011, 6:27pm

I decided to be wild today and finally try using Rounded Corners.

Unfortunately what should be super simple to implement is not working.

Here is a snippet of my HTML…


	<div id="box_Events">
		<h3 class="header3_h3">Events</h3>
		<h4>Current Dates:</h4>

And here is the code I added to my style-sheet…


#box_Events{
	background-color: #FFFFCC;
	border-top-left-radius: 10px;	/* This will create a circular rounded corner, with a radius of 10 pixels. */
}

What am I doing wrong?

(BTW, I am on my MacBook using FireFox…)

Debbie

xhtmlcoder · October 2, 2011, 6:53pm

Seems to work correctly to me try increasing the pixel value or alter the colour to see the difference unless it’s a Mac bug.

DoubleDee · October 2, 2011, 6:59pm

You’re not using FireFox…

DoubleDee · October 2, 2011, 7:00pm

CRAP!!

SitePoint just erased all of my work while I was re-writing this thread… :mad:

(Another Bug!! Don’t time people out while they are editing something?!)

Debbie

DoubleDee · October 2, 2011, 7:09pm

* Fixed original issue, but have a new issue. Let’s start over?! *

I have a Right Panel on my home page.

To create it, I used a <div>.

And to create a Header with a grey background and white text, I styled my <h3>.

With a rectangular layout, everything works great. But when I tried to use Rounded Corners for the first time, things are getting screwed up.

For some reason, even though I added Round Corners to both the <div> and <h3> the radii don’t match and I get the <div>'s background color bleeding through?! :mad:

Here is an enlarged screenshot of what I see in Safari…

New
Here is an enlarged screenshot of what I see in FireFox…

Here is my HTML…


<!-- Events Panel -->
<div id="box_Events">

<h3 class="header3_h3">Events</h3>

Here is my CSS…


.header3_h3{
	/* Added 2011-10-02 */
	-moz-border-top-left-radius: 8px;
	-moz-border-top-right-radius: 8px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;

	padding: 0.3em 0.5em;
	text-align: left;
	line-height: 1.4em;
	font-size: 1.4em;
	font-weight: bold;
	color: #FFF;
	background-color: #AAA;
}


#box_Events{
	/* Added 2011-10-02 */
	-moz-border-radius: 8px;
	border-radius: 8px;
	
	background-color: #FFFFCC;
}

What is creating this problem and how can I fix it?

Thanks,

Debbie

P.S. I am on a MacBook.

dresden_phoenix · October 2, 2011, 8:49pm

DD,
the correct mozzila syntax is:
-moz-border-radius-topleft/ -moz-border-radius-right.

That should fix it.

On a related suggestion, since webkit and moz vary in in their syntax, in the future ( unless you are trying to override something) it may be simpler to write : -moz-border-radius: 8px 8px 0 0 ; ( TL TR BR BL)

Hope that helps

xhtmlcoder · October 2, 2011, 9:56pm

I am using Fx 7.0.1 but not a Mac.

DoubleDee · October 2, 2011, 10:54pm

Did you see what I posted in Post #5??

(SitePoint stopped me from adding an “Edit” right before I hit “Post” and it made me lose everything so I had to re-post. Please check out the two Screen-Shots as they show the problem I’m having - even after your code fix above…)

Thanks,

Debbie

P.S. I even tried this website (http://border-radius.com/) to make certain that my syntax was okay, but no luck?! :-/

dresden_phoenix · October 3, 2011, 12:30am

I am using FF 3.6x. From the code I gave / and the code you gave… I don’t get the result in your screen shot. Do you have an anchor inside the Hx?

Anyway, try this:
{ -webkit-background-clip: padding-box;-moz-background-clip: padding-box;} it should at least serve tighten your Safari corners.

DoubleDee · October 3, 2011, 12:43am

Me too, except on my MacBook.

From the code I gave / and the code you gave… I don’t get the result in your screen shot. Do you have an anchor inside the Hx?

Nope. It is just as I posted.

Anyway, try this:
{ -webkit-background-clip: padding-box;-moz-background-clip: padding-box;} it should at least serve tighten your Safari corners.

I tried that and it didn’t do anything?!

.header3_h3{
	/* Added 2011-10-02 */
	-webkit-border-top-left-radius: 8px;
	-webkit-border-top-right-radius: 8px;
	-moz-border-radius-topleft: 8px;
	-moz-border-radius-topright: 8px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;

	-webkit-background-clip: padding-box;
	-moz-background-clip: padding-box;

	padding: 0.3em 0.5em;
	text-align: left;
	line-height: 1.4em;
	font-size: 1.4em;
	font-weight: bold;
	color: #FFF;
	background-color: #AAA;
}

This sounds like a problem for Paul O’…

Debbie

DoubleDee · October 5, 2011, 1:24am

I still haven’t figured out what is causing this issue.

Anyone…

Debbie

chris_upjohn · October 5, 2011, 8:54am

Is there a link to your page as i feel the issue is been caused by something failing directly before it as in the past i have had strange issues with the CSS silently failing because of missing colons etc…

system · October 5, 2011, 3:35pm

Can you put a copy live somewhere? I suspect either some other element interaction or other issue on the page – or our not seeing the COMPLETE code is hampering our ability to help you.

Snippets suck, and never give you the whole picture.

PaulOB · October 5, 2011, 6:40pm

lol - I think Dresden actually gave you the answer in post #6 where you are using the wrong syntax for the top borders in Mozilla.

Firefox 3.6 needs the -moz syntax and as you gave the incorrect rule the top borders of the h3 they were not rounded and stick out of box events. I get exactly the same as your drawing when using your code but is fixed when adding the correct rule.

If it doesn’t fix it for you then as Jason said you must post all the code or a link to the problem.

FF3.6 is a bit old now anyway and you should upgrade as FF7 is just out.

system · October 5, 2011, 10:36pm

Or downgrade to 3.5x since that’s the last time the web developer toolbar worked properly.

DoubleDee · October 6, 2011, 2:10am

Sorry, I just created this on my laptop this weekend, so there is no online copy.

Debbie

DoubleDee · October 6, 2011, 2:45am

Paul,

To be sure, here is the code I am using…


.header3_h3{
	/* Added 2011-10-02 */
	-webkit-border-top-left-radius: 8px;
	-webkit-border-top-right-radius: 8px;
	-moz-border-radius-topleft: 8px;
	-moz-border-radius-topright: 8px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;

	-webkit-background-clip: padding-box;
	-moz-background-clip: padding-box;

	padding: 0.3em 0.5em;
	text-align: left;
	line-height: 1.4em;
	font-size: 1.4em;
	font-weight: bold;
	color: #FFF;
	background-color: #AAA;
}


#box_Events{
	/* Added 2011-10-02 */
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;

	background-color: #FFFFCC;
}


<div id="box_Events">
	<h3 class="header3_h3">Events</h3>
	</h3>
</div>

Is there a problem with the syntax of this code??

Debbie

system · October 6, 2011, 3:46am

Apart from closing the H3 twice?

I really would NOT waste the code on the full named versions of those corners. With the syntax being different (as dresden_phoenix mentioned) you might be better off using the condensed property instead which IS consistent across browsers.


	-moz-border-radius:8px 8px 0 0;
	-webkit-border-radius:8px 8px 0 0;
	border-radius:8px 8px 0 0;

Won’t have those issues – and lose the background-clip; unless you’re using images it tends to cause more problems than it solves.

Stupid question: Are you using a reset?

This:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<style type="text/css">
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img,fieldset {
	border:none;
}

#boxEvents {
	width:16em;
	margin:1em auto;
	background:#FFC;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
}

#boxEvents h3 {
	padding:0.3em 0.5em;
	margin-bottom:0.71em;
	text-align:left;
	font:bold 140%/140% arial,helvetica,sans-serif;
	color:#FFF;
	background:#AAA;
	-moz-border-radius:8px 8px 0 0;
	-webkit-border-radius:8px 8px 0 0;
	border-radius:8px 8px 0 0;
}

#boxEvents p {
	padding:0 1em 1em;
}


</style>

</head><body>

<div id="boxEvents">
	<h3>Sample heading</h3>
	<p>Sample Text</p>
<!-- #boxEvents --></div>

</body></html>

Works just fine in every modern browser I throw it at, which is just part of why I’m wondering if it’s something else on the page that’s messing with you – something like why you’d even be wasting a class on that H3 in the first place…

PaulOB · October 6, 2011, 8:18am

That code seems to be working in FF3.6 (mac) now (apart from the duplicate closing tag that Jason mentioned).

You’ll have to put it online if you are still having problems

Try Jason’s code above just in case you have something else in your page that is corrupting things.

DoubleDee · October 7, 2011, 3:27am

Not in my code. Type-o here only.

I really would NOT waste the code on the full named versions of those corners. With the syntax being different (as dresden_phoenix mentioned) you might be better off using the condensed property instead which IS consistent across browsers.


	-moz-border-radius:8px 8px 0 0;
	-webkit-border-radius:8px 8px 0 0;
	border-radius:8px 8px 0 0;

Won’t have those issues – and lose the background-clip; unless you’re using images it tends to cause more problems than it solves.

That didn’t help.

Stupid question: Are you using a reset?

I use this in my main.css…

*{
	margin: 0;
	padding: 0;
}

This:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<style type="text/css">
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img,fieldset {
	border:none;
}

#boxEvents {
	width:16em;
	margin:1em auto;
	background:#FFC;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
}

#boxEvents h3 {
	padding:0.3em 0.5em;
	margin-bottom:0.71em;
	text-align:left;
	font:bold 140%/140% arial,helvetica,sans-serif;
	color:#FFF;
	background:#AAA;
	-moz-border-radius:8px 8px 0 0;
	-webkit-border-radius:8px 8px 0 0;
	border-radius:8px 8px 0 0;
}

#boxEvents p {
	padding:0 1em 1em;
}


</style>

</head><body>

<div id="boxEvents">
	<h3>Sample heading</h3>
	<p>Sample Text</p>
<!-- #boxEvents --></div>

</body></html>

Works just fine in every modern browser I throw it at,

Works for me too.

which is just part of why I’m wondering if it’s something else on the page that’s messing with you – something like why you’d even be wasting a class on that H3 in the first place…

What alternative do I have?

Debbie

Topic		Replies	Views
Rounded Corners Not Working (re-visited) HTML & CSS	4	516	October 8, 2014
CSS Rounded Corners Get Started	8	4563	April 12, 2011
Rounded corners with border radius with 1px border HTML & CSS	5	3705	February 23, 2011
Are rounded corners possible? HTML & CSS	8	690	August 25, 2010
Rounded corners -- only works if I put border around element HTML & CSS	4	454	October 8, 2014

Rounded Corners Not Working

Related topics