Surfin' Safari

CSS3 Goodies – Borders and Backgrounds

Posted by Dave Hyatt on Friday, August 26th, 2005 at 5:17 pm

The latest WebKit builds now support three new CSS3 properties fully and one partially.

border-image – WebKit now fully supports the CSS3 border-image property. This property allows you to slice an image into nine pieces (the corners, sides, and center) and use these images to render the border of a box. You can stretch, tile or round the sides and middle. WebKit can also even handle border-image on inline flows like spans and links.

background-clip – Background-clip is a new property that lets you clip the background to the border, content or padding box. WebKit supports this new property as part of the background shorthand as well. This property works with multiple backgrounds also.

background-origin – The background-origin property lets you control where the origin of the background is as far as background-position is concerned. You can also choose the border, padding or content boxes. Like background-clip it can be specified in the background shorthand and works with multiple backgrounds.

border-radius – WebKit now supports border-radius for transparent borders. When used with transparent borders, both the background and border images will render with a rounded clip rect applied, so you can make rounded boxes now with a border-image or with background images. Support for other border types will be coming soon.

With these changes WebKit actually now supports a majority of the CSS3 Borders and Backgrounds draft. Only a few properties remain.

51 Responses to “CSS3 Goodies – Borders and Backgrounds”

  1. Catfish_Man Says:

    *Does the border-radius dance*

    You guys rock :)

  2. Pascal Says:

    any chance you could post some screenshots of this in action?

  3. X-Istence Says:

    Some screenshots would be nice.

    Also, Safari is raising the bar for web browser that are standards compliant. When are we going to see the browser on Windows based platforms as well as FreeBSD/Linux? It’d be nice to finally see a browser that can properly render CSS without having to rely on hacks.

  4. Sören Nils 'chucker' Kuklau Says:

    Also, Safari is raising the bar for web browser that are standards compliant. When are we going to see the browser on Windows based platforms as well as FreeBSD/Linux?

    Nokia has a WebKit port to GNOME/Gtk. It might eventually become feasible to make a Safari-like browser out of it. Seeing as Gtk runs on Windows (though it’s ugly ;-) ), it would allow for a Windows WebKit browser too.

  5. Thinine Says:

    I too would like some sample sites.

  6. Andrew Says:

    I like new browser features as much as the next person, but those properties are still draft – shouldn’t they be prefixed with something like -webkit-?

  7. hyatt Says:

    They will be prefaced with -khtml- before shipping if the module is still in draft.

  8. Denis Defreyne Says:

    This is really nice!

    Sample pages?

    http://amonre.org/css/border-radius/sample.html and http://amonre.org/css/border-radius/sample.png
    http://amonre.org/css/border-radius/sample2.html and http://amonre.org/css/border-radius/sample2.png

    I’m sure someone will come up with a more advanced example soon… :)

  9. cwehrung Says:

    Really really nice.. but i’ll be really nice, when every browser will have that…
    Denis Defreyne > Nice to see that i’m not the only one having switched Safari to a non-textured window ! (i really prefer plastic, that is really “aqua”, (metal is not !!))

  10. MIND Justin Says:

    It doesn’t work for me (Safari Version 2.0 (412.2.2))
    When will it be available for Safari via the download manager?

    I probably need to download the updated Webkit but I need the version of Safari that everyone has cause otherwise I can not truthfully test my sites (I’m a webdesigner)

  11. hp Says:

    GREAT new features. I’m looking forward to enhancing my sites with them. I was using the mox-border-radius and border-radius commands earlier, hopeing some browser will soon support the CSS3 spec. However, I have been running into serious rendering issues. If I used border-radius on a , then ALL other html content appears to be clipped? The is rendered correctly with rounded corners, but the rest of the page is all messed up? I used the sampe page above to create a test page to illustrate this. I filed a bug at bugzilla #4696 which can be found at

    http://bugzilla.opendarwin.org/show_bug.cgi?id=4696

    which contains this test page. I’m sure this is just some over-aggressive clipping which can hopefully be cleaned up quickly. Otherwise, thanks a bunch for bringing these very powerful CSS3 properties to use.

  12. Matt Says:

    Mind Justin, you can run Safari with the updated WebKit or the 10.4.2 shipping version. It doesn’t permanently alter any of the frameworks on your system. Read “Getting the Code” and “Building WebKit” for more information.

    Matt

  13. MIND Justin Says:

    So I can switch it off easy?
    Cause if that is the case then there is going to be a tutorial on my site on how to do this soon.

  14. Matt Says:

    There are a number of ways to do it.
    The ‘default’ way is to launch Safari from the command line with a (provided) script that points it to the newer frameworks. What I’ve done however is made a Safari called “Safari (Nightly Build).app” and edited the info.plist within the application itself to always point to the new framework. That way I can run the latest WebKit in Safari right from my dock and also the shipping version of WebKit alongside it.

    Matt

  15. xfinite Says:

    I can’t seem to get the border-image stuff to work. I took the example code from the CSS3 B&B page:
    http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-border-image

    And made it into a page:
    http://www.xfinitegames.com/safari/borderimage.html

    Safari with WebKit completely rebuilt from scratch today simply renders the double border. I toyed with the css rules for a while but can’t seem to get the image to show up. Am I doing something obvious wrong?

    Arthur

  16. Pingback from a.css, esbudellant estàndards » Safari segueix implementant CSS 3:

    [...] umari en Atom Safari segueix implementant CSS 3 27/08/05 Les darreres versions de WebKit de Safari implementen noves propietats definides al Backgro [...]

  17. Chipersoft Says:

    I too ran into the clipping problems when I tried to apply border-radius to the entries on my blog. Also, the actual border doesn’t get drawn in the rounded area, it just stops when it starts curving.

  18. hyatt Says:

    Right, as I said, border-radius only works with transparent borders right now. Other border styles (like solid, dotted, etc.) have yet to be implemented. I’ll look into the clipping issues.

  19. hp Says:

    I too tried using the http://www.w3.org example on border-image’s, but couldn’t get it to work? Does anyone have an example on how to make this work?

  20. hukl Says:

    I put screenshots as well as a short description on how its done right on my site. Just do a div with a background image, than apply border radius rules to the div. it is working like a clipping mask. can’t wait for the other implementations.

    http://hukl.geekheim.de/archives/2005/08/28/css3-webkit-und-rounded-corners/

  21. crencom Says:

    I know this isn’t necessarily what this topic is about, but I have attempted to run Safari off of the new webkit as Matt stated above w/out success. I have used this webkit for awhile and did not realize you could start Safari w/ the new webkit from the dock w/out having to run the script manually from the terminal. I opened the Safari “copy” info.plist and edited it to point to the directory where the “run-safari” was located. It still starts the standard Safari 2.0 and fails the Acid2 test. Any ideas?

  22. hyatt Says:

    I just fixed the over-aggressive clipping bug and the border-image parsing bug. The examples above should work now. Note that the sample image used in the CSS3 draft is actually buggy and doesn’t evenly divide into 27×27 squares.

  23. Catfish_Man Says:

    crencom: you could just get a nightly build using NightShift (check macupdate.com or versiontracker.com)

  24. Matt Says:

    crencom: I’ll stick a tutorial on .mac sometime today and then post back here.

    Matt

  25. xfinite Says:

    Hyatt, thanks for the quick fix. The border image now indeed renders and the image of the W3C was indeed flawed. I’ve modified it and the individual blocks now fit well (I’ve used circles instead of diamonds because I suck at Photoshop.)

    There’s one last thing: I specified “round” for the horizontal tiling of the middle images. Safari seems to just tile the images and cuts of the last image. The spec says that the images should be scaled so that an exact whole number of images fit in the border in this case.

    Border-image is pretty cool and I’m glad Safari is once again the first to support it. Great work, Hyatt!

  26. xfinite Says:

    Another addition, I noticed that it sometimes does draw the border correctly. I added a simple animation test to my test page that slowly stretches the border 1 full tile. It acts pretty strange.

    http://www.xfinitegames.com/safari/borderimage.html

  27. hyatt Says:

    Yeah, “round” has a bit of a rounding error because I used floating point math on the pattern tiling, so one tile can have a non-integral width. File a bug.

  28. Pingback from Neverday linkage - More CSS3 in Webkit:

    [...] More CSS3 in Webkit August 30, 2005 • Uncategorized There are now four new CSS3 properties in the Webkit CVS. [...]

  29. Julien Nadeau Says:

    I’ve set up a test/preview page at http://www.junado.com/css3-border-image/ showing the four different properties.

    However, while playing with the properties, something quite strange has come up. I was using multiple classes to save me some CSS (giving more than one class to the same attribute like this – ). While testing this with background-origin, when I set the background-origin value in the second class, it did not work for the value border. You can see my test page for more details and an example.

  30. Pingback from Minid.net » Blog Archive » Actualización: Safari 2.0.1:

    [...] o que se puede leer en la web de Apple, una pena. Hace unos días, David Hyatt, anunciaba [...]

  31. VGZ Says:

    I hope this makes it into the final version of CSS3 and is made a standard soon so I can get rid of some of the images on my site w/o losing the look.

    On a related note, when are the Safari updates (like the 2.0.1 update from yesterday) going to start using the new webkit. It’s been months since we got a version of the webkit that passed the acid2test, yet the most current version of Safari that’s shipping still fails it, hard.

    What’s the deal?

  32. Chris Bentley Says:

    Round stuff — http://www.webx.com.au/code/safari/roundstuff.html

  33. Pingback from Geoffers’ » WebKit CVS Supports CSS3’s border-radius property:

    [...] Web Stuff – Tuesday, August 30th 2005 On Friday, David Hyatt posted on Surfin’ Safari that support for several CSS3 properties had been added, including border- [...]

  34. hyatt Says:

    Julien, you have some kind of odd stray character in your source. That’s why background-origin is not matching the class. Instead of bgo1 you have .bgo1Ê.

  35. Julien Nadeau Says:

    Thanks hyatt, that was rather odd as I did not see anything but a space, yet just erasing it and putting it back in place seemed to solve my problem.

    I’m investigating another strange bug that happens with border-image: url(‘something.jpg’); that swaps the up and down border pictures. My experiments will be visible at http://baal.pingouin.ca/css3-border-image/ (once that website is brought back to life) since my other site has been killed by the hits (it has a very low bandwidth limit).

  36. CaptainN Says:

    Great news about the CSS3 border support. Now on to CSS3 Webfonts (with SVG Fonts) :-D

    http://www.w3.org/TR/css3-webfonts/

  37. hukl Says:

    i wrote an email to the w3c guys asking about the roadmap and the progress on css3, unfortunatly it seems that it will take a long time till it gets recommended. I ask the guy who replied very detailed if he would mind posting his reply here if you folks are interested.

    I also asked him to hold a lecture on the 22C3 Hacker conference in Berlin / Germany to give insights in the work of the w3c and the roadmap and all this and he seemed to be really interested. I think theres a good chance that he will show up.

    The conference hompage is: http://www.ccc.de/congress/2005/
    The one from last year is: http://www.ccc.de/congress/2004/

    for those who are interested ;)

  38. Rolley Says:

    I finally figured that webkit also accepts -moz-border-radius. Actually it seems safari uses the last xxxborder-radius instruction it parsed. My take is it should take border-radius over -moz-border-radius, whatever the order !

    Exemple

    .simple {
    border-radius: 20px;
    -moz-border-radius: 10px;

    background: brown;
    width: 100%;
    height: 40px;
    position: relative;
    }

    As is the border-radius will be of 10px.
    Now inter-change the first two lines and put the border-radius: 20px second and the border-radius will be 20px.

  39. solo Says:

    I very happy to see that CSS3 is being worked up (are you discussing these changes with the KHTML guys?)
    But I ask myself, is it good to _expose to the public_ an implementation of an incomplete standard?
    The standard could change before it is finalized and we would be left with an incompatible browser.
    Or do you think to update Safari to the final CSS3 standard breaking the style sheets that will appear in the meantime (between next safari release and CSS3 finalization)?

  40. Pingback from code/caffeine » Blog Archive » css3 Toy Surprise Inside!:

    [...] on September 13th, 2005 Topics: css Since August 26, Apple has had some css3 goodies in WebKit to create various borders. On [...]

  41. Pingback from Browser World » The State of the Browsersphere:

    [...] ion of the border-image, background-clip, background-origin and border-radius properties. David Hyatt eloquently explains what these new properties do [...]

  42. Pingback from My Crow is Soft » Blog Archive » CSS3 Goodies - Borders and Backgrounds:

    [...] ntroducing DomCorners » CSS3 Goodies – Borders and Backgrounds CSS3 Goodies – Borders and Backgrounds This entry was posted on Sa [...]

  43. CD Says:

    I’ve found a problem with border-radius – maybe I should report a bug but I’m a newbie so I though I would post here.

    It’s a slightly obscure one, but if you apply a border-radius to a div *and* set the dix to be content-editable, the border radiuses are incorrectly drawn as you add new lines of text (forcingrthe div to grow vertically).

    It’s probably an easy one to fix :-)

  44. Pingback from Leefe rates the world… »Blog Archive » Going round the corners:

    [...] using the prefix ‘-moz-’. And it works as described. I have seem mention that Safari supports [...]

  45. Kurt Todoroff Says:

    I discussed this websit a few days ago. Well Done!

    I decided to try border-radius. I added the following code
    to my cascading style sheet:

    -webkit-border-radius

    as follows:

    #tociphotograph{
    xxx: xxx;
    yyy: yyy;
    -webkit-border-radius: 10px solid #3366FF;
    }

    The object’s corners remain square.

    However, when I removed this line from my CSS and then added:

    -webkit-border-radius

    to my HTML as follows:

    Safari renders nice rounded corners.

    Why doesn’t Safari recognize the code in the CSS?

    Thank you.

  46. Kurt Todoroff Says:

    My apologies!

    I meant to type:

    I discovered this website a few days ago.

  47. Mark Rowe Says:

    @Kurt: Take a look at the specification for the syntax of border-radius. It takes either one or two length values which specify the radii of the ellipse used when drawing the curved corner.

  48. Kurt Todoroff Says:

    Hi Mark,

    Thank you for your prompt response. My apologies again. My posting should
    have read:

    to my HTML as follows:

    Safari renders nice rounded corners.

    On to the CSS code. I reviewed the specification for the syntax of border-radius.
    Are you (and the spec) suggesting that I should not include the code:

    “solid #3366FF”

    because border-radius will inherit these attributes from #tociphotograph{}?

    I just deleted this code from my CSS and tried it again. The corners are still
    square.

    Perhaps I’m overlooking something, or I’m misinterpreting the specification.

    Thank you for your help. I look forward to your next posting.

  49. Kurt Todoroff Says:

    I see what I have done wrong. When I enclose information within
    the HTML open and close carets, the entire content is ignored and
    not posted.

    I’ll remember that.

  50. Mark Rowe Says:

    @Kurt: Take a look at http://www.css3.info/preview/rounded-border/ for an example of how to use border-radius. The [-webkit-]border-radius property is only for specifying the “roundness”. You must still make use of the border property to set the border width, line style and colour.

  51. Kurt Todoroff Says:

    Hi Mark,

    In my attempt to keep my postings terse, I have unfortunately misled you.
    Here is the exact code that I added to my CSS to generate rounded corners.

    #tociphotograph{
    padding: 10px;
    margin: 10px 10px 35px 10px;
    background-color: #FFFFFF;
    border: 1px solid #3366FF;
    -webkit-border-radius: 10px solid #3366FF;
    -moz-border-radius: 10px solid #3366FF;
    }

    After I read your first reply to my query, I revised the code by removing
    “solid” and “#3366FF” to read as follows:

    #tociphotograph{
    padding: 10px;
    margin: 10px 10px 35px 10px;
    background-color: #FFFFFF;
    border: 1px solid #3366FF;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    }

    The second implementation in my style sheet solved the problem. The rounded corners
    look wonderful.

    By the way, will “-moz-xxx” take care of Firefox?

    Thank you for your help.

    Kurt Todoroff