This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

css3 border radius

more options

Issue

I have another kind of problem with Firefox

Description

I am using css3 to create rounded edges on an img in my html. Safari renders border radius ok but Firefox needs image in CSS (background image)

here is the css

/* only works in webkit */

  1. sample img{

-moz-border-radius:20px; -webkit-border-radius: 20px; border-radius: 20px; width:220px; height:220px; }

/* works in webkit and gecko */

  1. colouredbox {

background-color: #fae93a; -moz-border-radius:20px; -webkit-border-radius: 20px; border-radius: 20px; width:220px; height:220px; }

/* works in webkit and gecko */

  1. imageviacss {

-moz-border-radius:20px; -webkit-border-radius: 20px; border-radius: 20px; background-image: url(220sample.jpg); width:220px; height:220px; }

(Edited by Moderator: placed code in a CODE block - c)

This happened

Every time Firefox opened

i was trying it out :D

Firefox version

3.6.4

Operating system

Intel Mac OS X 10.6

User Agent

Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-GB; rv:1.9.2.4) Gecko/20100513 Firefox/3.6.4

Plugins installed

  • -Displays PDF documents in the browser.
  • Gecko default plugin
  • Runs Java applets using the latest installed versions of Java. For more information: Java Embedding Plugin. Run version test: Java Information.
  • doubleTwist Web Plugin
  • iPhoto6
  • Unity Web Player lets you experience dazzling interactive 3D right in your browser. For more information, visit Unity .
  • Allows webpages to support pressure-sensitive drawing on Wacom pen tablets.
  • 3.0.50106.0
  • The Flip4Mac WMV Plugin allows you to view Windows Media content using QuickTime.
  • Shockwave Flash 10.0 r45
  • The QuickTime Plugin allows you to view a wide variety of multimedia content in web pages. For more information, visit the QuickTime Web site.
== Issue == I have another kind of problem with Firefox == Description == I am using css3 to create rounded edges on an img in my html. Safari renders border radius ok but Firefox needs image in CSS (background image) here is the css <code>/* only works in webkit */ #sample img{ -moz-border-radius:20px; -webkit-border-radius: 20px; border-radius: 20px; width:220px; height:220px; } /* works in webkit and gecko */ #colouredbox { background-color: #fae93a; -moz-border-radius:20px; -webkit-border-radius: 20px; border-radius: 20px; width:220px; height:220px; } /* works in webkit and gecko */ #imageviacss { -moz-border-radius:20px; -webkit-border-radius: 20px; border-radius: 20px; background-image: url(220sample.jpg); width:220px; height:220px; } </code> <br/> <br/>''(Edited by Moderator: placed code in a CODE block - c)''<br/> <br/> == This happened == Every time Firefox opened == i was trying it out :D == == Firefox version == 3.6.4 == Operating system == Intel Mac OS X 10.6 == User Agent == Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-GB; rv:1.9.2.4) Gecko/20100513 Firefox/3.6.4 == Plugins installed == *-Displays PDF documents in the browser. *Gecko default plugin *Runs Java applets using the latest installed versions of Java. For more information: Java Embedding Plugin. Run version test: Java Information. *doubleTwist Web Plugin *iPhoto6 *Unity Web Player lets you experience dazzling interactive 3D right in your browser. For more information, visit Unity . *Allows webpages to support pressure-sensitive drawing on Wacom pen tablets. *3.0.50106.0 *The Flip4Mac WMV Plugin allows you to view Windows Media content using QuickTime. *Shockwave Flash 10.0 r45 *The QuickTime Plugin allows you to view a wide variety of multimedia content in web pages. For more information, visit the QuickTime Web site.

All Replies (2)

more options

those numbers at the front of the code should be hashs #

more options

See: https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions https://developer.mozilla.org/en/CSS/-moz-border-radius --- A good place to ask questions and advice about web development is at the MozillaZine Web Development/Standards Evangelism forum. The helpers at that forum are more knowledgeable about web development issues. You need to register at the MozillaZine forum site in order to post at that forum.

See http://forums.mozillazine.org/viewforum.php?f=25