Home > Border Radius > Border-top-left-radius Not Working In Firefox

Border-top-left-radius Not Working In Firefox


If you want different irregular corners, you have to supply values to all four declarations: border-top-left-radius: 5px 20px; border-top-right-radius: 10px 5px; border-bottom-right-radius: 10px 20px; border-bottom-left-radius: 20px 5px; Mozilla avoid this by Peter Gasston says:Comment » June 19th, 2007 at 12:12 pm I've added an example of -webkit-border-radius: 5px 20px to the post; I have to say, the rendering is horrible. Examples: border-top-left-radius: 10px 5px; border-bottom-right-radius: 10% 5%; border-top-right-radius: 10px; Where two values are supplied these are used to define, in order, the horizontal and vertical radii of a quarter ellipse, which The Syntax: [ | ]{1,4} [ / [ | ]{1,4} ]? http://basetelecom.net/border-radius/border-top-left-radius-not-working-in-ie9.html

If only one set of values are supplied, these are used to determine both the vertical and horizontal equally. border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius The border-*-radius properties can each accept either one or two values, expressed as a length or a percentage (percentages refer to the corresponding dimensions of the border Border-radius: create rounded corners with CSS! The following diagram gives a few examples of how corners might appear given differing radii: If either value is zero, the corner will be square, not round.

Border Radius Top Left And Right

Mozilla Firefox (version 1.0 onward) supports border-radius with the -moz- prefix, although there are some discrepancies between the Mozilla implementation and the current W3C specification (see below). border-radius: 5px 10px 10px 20px; The problem is that this could be confused for four corners with regular curves. You can read more on the Mozilla Developer Center here.

I'm not sure if that's because it's Safari for Windows, perhaps someone with an OS X version could try? 05.

An optional second set of values, preceded by a ‘/', define the vertical radii for all four corners. Border-top-radius The Syntax: border-*-*-radius: [ | <%> ] [ | <%> ]? The -moz- prefix Mozilla's Firefox browser has supported the border-radius property, with the -moz- prefix, since version 1.0. The code for this example is, in theory, quite simple: #example1 { border-radius: 15px; } However, for the moment, you'll also need to use the -moz- prefix to support Firefox (see

This is best explained in the following sections of the specification:


Where only one value is supplied, this is used to define both the horizontal and vertical radii equally. However, it is only since version 3.5 that the browser has allowed elliptical corners, i.e. Border Radius Top Left And Right border-radius The border-radius shorthand property can be used to define all four corners simultaneously. Firefox Border Radius Not Working The property accepts either one or two sets of values, each consisting of one to four lengths or percentages.

Comments 01. navigate here If bottom-left is omitted it is the same as top-right, if bottom-right is omitted it is the same as top-left, and if only one value is supplied it is used to Peter Gasston says:Comment » June 19th, 2007 at 9:24 am I've read that Konqueror supports -khtml-border-radius, but can't find any official confirmation, and can't get it to work. 03. Prior to version 3.5, the browser only accepted one value per corner, resulting in corners with equal horizontal and vertical radii. Border Radius For All Browsers

Mozilla, with the prefix -moz- (and differing declarations), accepts only a single value and, therefore, only regular curves. accepting two values per corner to determine the horizontal and verical radii independently. It will be interesting to see which comes out on top; in the meantime, if you want to use border-radius in your code the only way to get them to appear http://basetelecom.net/border-radius/border-top-left-radius-not-working.html more stack exchange communities company blog Stack Exchange Inbox Reputation and Badges sign up log in tour help Tour Start here for a quick overview of the site Help Center Detailed

Safari and Chrome (and other webkit based browsers) have supported border-radius with the -webkit- prefix since version 3 (no longer needed from version 5 onward), although again with some discrepancies from Border Radius Circle more stack exchange communities company blog Stack Exchange Inbox Reputation and Badges sign up log in tour help Tour Start here for a quick overview of the site Help Center Detailed Examples: border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px; border-radius: 5px; border-radius: 5px 10px / 10px; The first set of (1-4) values define the horizontal radii for all four

Safari, with the prefix -webkit-, accepts these.

current community chat Stack Overflow Meta Stack Overflow your communities Sign up or log in to customize your list. This ambiguity comes about in the border-radius shorthand property; if you enter a double value in this you'd expect to apply the irregular curves to all four corners: border-radius: 5px 10px; Cross Browser Examples Here's a few basic examples that should work in current versions of Firefox, Safari/Chrome, Opera and even IE9: A B C D E F #Example_A { height: 65px; Box-shadow Tweet The CSS3 border-radius property allows web developers to easily utilise rounder corners in their design elements, without the need for corner images or the use of multiple div tags, and

This problem is down to interpretation of the draft. The only major difference is in the naming of the individual border-*-radius properties, with the -moz- prefixed properties following a slightly different naming convention as follows: W3C Specification Mozilla Implementation border-radius leks√≥ says:Comment » June 19th, 2007 at 11:44 am Could you attach a screenshot of such a irregular curve ? 04. this contact form Update:Recent Firefox nightly versions support border-radius without the -moz- prefix.

Browser Support At present Opera (version 10.5 onward), Safari (version 5 onward) and Chrome (version 5 onward) all support the individual border-*-radius properties and the border-radius shorthand property as natively defined The draft proposes four declarations, which describe the four corners of a block: border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius Each of them should accept two values, which define the radii of a quarter For each set of values the following applies: If all four values are supplied, these represent the top-left, top-right, bottom-right and bottom-left radii respectively. Even Microsoft have promised, and demonstrated in their recent preview release, support for border-radius from Internet Explorer 9 onward (without prefix).