Trouble with rounded corners

Trouble with rounded corners

Page 1 of 1

1 Replies - 2179 Views - Last Post: 30 April 2006 - 07:58 PM

#1 [email protected]   User is offline

  • D.I.C Head
  • member icon

Reputation: 2
  • View blog
  • Posts: 94
  • Joined: 18-February 05

Trouble with rounded corners

Post icon  Posted 29 April 2006 - 11:04 PM

After following the tutorial below, I have had a lot of success with rounded corners in Firefox. I have been having trouble, however; when I try to use rounded courners with background images or patterns. The file below shows the problem I am having. The border gets rounded but the background images do not

Does anyone have any suggestions?

test page


There is a cool way to get rounded corners on your containers (DIV or whatever) of almost any size/dimension (radius) without using a single image. The good folks at Mozilla have provided us support for this CSS standard (sorry, IE hasn't caught up to this yet, and I'm not sure IE7 will either...if someone has newer info on this, please post).

The code is actually painfully simple. Just define the amount of radius you want for a given corner of a container's style declaration:

#inner {
border:3px solid #D6D6C2;
padding: 3px;
font: 12px Verdana, Arial, Helvetica, sans-serif;
-moz-border-radius: 15px 0 15px 0;

Of course in the
you would attach the #inner declaration to a DIV:
<div id="inner">Here is some content</div>
or other container element.

In this instance, we've defined an ID declaration called "inner" with a certain width, floated it left, gave it a bit of a margin all around, a border, padding and a font. But if you look closely at the last item, you'll notice a definition for the amount of radius for the border. The convention here for the 4 numbers is: upper-left, upper-right, lower-right, lower-left. In this case, we've got a nice 15px radius on the upper-left and lower-right corners. Cool! To see this in action, take a look at the following page:

RRHS B & E Academy

Be sure you're looking at this in Firefox to see the effect. In IE, it just ignores the code and renders nice square corners. Very imaginitive Bill.

Anyway, have fun with this and keep hoping IE will catch up some day!

This post has been edited by [email protected]: 30 April 2006 - 02:08 PM

Is This A Good Question/Topic? 0
  • +

Replies To: Trouble with rounded corners

#2 Arbitrator   User is offline

  • D.I.C Addict
  • member icon

Reputation: 52
  • View blog
  • Posts: 530
  • Joined: 26-January 05

Re: Trouble with rounded corners

Posted 30 April 2006 - 07:58 PM

According to Pure CSS Rounded Corners by neuroxik this is not possible and I'm inclined to agree since I didn't see anything stating otherwise. It seems the best way to get rounded corners of dynamic proportions would be to nest divisions like so:

<div style="background: #f00 url(foo) top left;">
<div style="background: url(foo) top right;">
<div style="background: url(foo) bottom left;">
<div style="background: url(foo) bottom right;">

Of course, this would only work if you didn't need transparent corners; if you needed those then you'd have to add two more div inside, move the background color to the front-most div, and mess around with the padding and background-colors of the new div.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1