• 201016 Jun

    The W3C have today issued a last call working draft for the CSS3 Backgrounds and Borders module.

    The updated specification includes several changes from the previous Candidate Recommendation release including:

    * Addition of ‘content-box’ value of ‘background-clip’.
    * Change to the ‘background’ shorthand syntax for ‘background-clip’ and ‘background-origin’.
    * Removal of recommendation to use gradients for color transitions when ‘border-radius’ produces a curve.
    * (Re)Addition of ‘box-shadow’ property.
    * Various clarifications.

    You can read further detail on the changes in our previous article here.

    The W3C has set a deadline of the 6th July for comments. Any comments should be submitted to the www-style mailing list, see the status section of the specification for further details.

    You can skip to the end and leave a response.

  • Comments

    • 01.

       why is a border required to have rounded corners on a box. this makes no sense.


    • 02.

      @Jeffrey Gilbert :

      It’s not required.

    • 03.

       Jeffrey, why do you think that? Is it because of the name ‘border-radius’? It does not require a border, but it is applied to the border box (regardless of whether the border box contains a border or not), as apposed to say, the padding box or content box.

      I do think we could have avoided a lot of confusion if we had simply called it ‘corner-radius’, but it is a little late to change that now. And it does make sense to have it in the Backgrounds & Borders module, as this effect is mostly invivible without a background, border, or box-shadow.

    • 04.


      You keep writing great article, but I have to ask: Why limit your RSS-feed to only the beginning of the text in the article? All other RSS feeds in my stream have switched to full feeds, why not you?

    • 05.

      @Jeffrey Gilbert are you working for the IE team?

      What is your question?
      why is a border required to have rounded corners on a box. this makes no sense.
      Who said its required?

    • 06.

      @Brad It does make me think we should reorganize the sections so that ‘border-radius’ gets its own section titled “Rounded Corners”, instead of being tucked under the Borders section.

    • 07.
      Krzysztof Maczyński says:Comment » June 18th, 2010 at 4:55 pm

      fantasai, definitely +1

      This is probably going to be the first CSS3 Module except Selectors to become a Rec. But we’ll have to wait still for CSS 2.1 which is normatively referenced.

    • 08.

       @ fantasai,

      Works for me. Or it could go in “Miscellaneous Effects”, with a note about its name, perhaps. Does it need to fall out of LC to do that though?

    • 09.

      No, it’s just an editorial change. :)

    • 10.

      @Jeffrey, @Krzysztof, @Brad – Checked in, let me know if there’s anything else I should tweak: http://dev.w3.org/csswg/css3-background/#contents

    • 11.

       I’ve mentioned once before that I’d love the ability to have shadows with purely vertical or horizontal spread and blur. For example, to be able to give a declaration like “box-shadow: vertical 0 0 5px black;” and have matching elements cast a shadow above and below but not to the sides, or to say “box-shadow: inset horizontal 0 0 5px black;” and have matching elements receive an inner shadow on the sides but not on the top and bottom.

    • 12.

       @Daniel Walker

      I really like this idea as well, especially the horizontal-only shadow.
      It seems necessary.

    • 13.

       Does anyone know why a zero offset is not allowed for box shadows?

    • 14.

      It probably is too late to get such shadow in the spec, but I too would like to add my support for the addition of vertical/horizontal only shadows.

      Maybe not as strict as Daniel Walker proposed though.
      You could have two extra values (percentages 0-100) that control the spread bias on each axis.
      For example: box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .5) 10% 100%
      Would produce a vertical shadow.

    • 15.

      Is there a way to just specify a shadow on 1 side of a container.. or 2 sides as oppose to a full drop “L” shaped shadow ? 

    • 16.

      Think thats what QOAL s saying too.

      So something like {box-shadow: 0 5px} to do just vertical sides?

    • 17.

      Hey Ollie, yes you can all you have to do is…

      -moz-box-shadow: 10px 5px #999;
      -webkit-box-shadow: 10px 5px #999;

      In this example the 10px represent the right side of the container
      and the 5px represent the bottom on the container.

    • 18.


      Could you let me know how to do the CATEGORIES, FRIENDS and Meta baloon meun for this web pages.
      I have edited the meun coding, but it appear the blue color background at all baloon meun.
      Would you mind to tell me how to solve the problem?

    • 19.

       When will css3 bring us the promised gradient borders?

    • 20.

       Rounded Corners are great but what i would like to see is the ability to easily create diagonal cutoff borders.

      Something in the form of

      border-diag: Xpx Ypx #???;

      with associated -top-left, -top-right, bottom-left and -bottom-right options.

    • 21.

       i want to know how to create gradient color.


Advertise here?