CSS3 Goodies - Borders and Backgrounds
Posted by Dave Hyatt on Friday, August 26th, 2005 at 5:17 pmThe 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.
August 26th, 2005 at 5:28 pm
*Does the border-radius dance*
You guys rock
August 26th, 2005 at 5:34 pm
any chance you could post some screenshots of this in action?
August 26th, 2005 at 5:37 pm
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.
August 26th, 2005 at 9:48 pm
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.
August 27th, 2005 at 12:34 am
I too would like some sample sites.
August 27th, 2005 at 12:58 am
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-?
August 27th, 2005 at 1:13 am
They will be prefaced with -khtml- before shipping if the module is still in draft.
August 27th, 2005 at 1:47 am
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…
August 27th, 2005 at 3:09 am
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 !!))
August 27th, 2005 at 4:46 am
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)
August 27th, 2005 at 5:01 am
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.
August 27th, 2005 at 5:02 am
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
August 27th, 2005 at 5:26 am
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.
August 27th, 2005 at 7:07 am
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
August 27th, 2005 at 10:09 am
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
August 27th, 2005 at 10:36 am
[...] umari en Atom Safari segueix implementant CSS 3 27/08/05 Les darreres versions de WebKit de Safari implementen noves propietats definides al Backgro [...]
August 27th, 2005 at 12:03 pm
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.
August 27th, 2005 at 1:44 pm
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.
August 27th, 2005 at 5:07 pm
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?
August 27th, 2005 at 6:42 pm
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/
August 27th, 2005 at 8:59 pm
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?
August 27th, 2005 at 9:24 pm
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.
August 27th, 2005 at 11:33 pm
crencom: you could just get a nightly build using NightShift (check macupdate.com or versiontracker.com)
August 28th, 2005 at 2:22 am
crencom: I’ll stick a tutorial on .mac sometime today and then post back here.
Matt
August 28th, 2005 at 4:55 am
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!
August 28th, 2005 at 5:39 am
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
August 28th, 2005 at 10:36 am
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.
August 29th, 2005 at 4:35 pm
[...] More CSS3 in Webkit August 30, 2005 • Uncategorized There are now four new CSS3 properties in the Webkit CVS. [...]
August 29th, 2005 at 9:11 pm
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.
August 30th, 2005 at 5:05 am
[...] o que se puede leer en la web de Apple, una pena. Hace unos días, David Hyatt, anunciaba [...]
August 30th, 2005 at 5:17 am
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?
August 30th, 2005 at 6:28 am
Round stuff — http://www.webx.com.au/code/safari/roundstuff.html
August 30th, 2005 at 12:32 pm
[...] 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- [...]
August 30th, 2005 at 4:39 pm
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Ê.
August 31st, 2005 at 7:27 am
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).
August 31st, 2005 at 3:06 pm
Great news about the CSS3 border support. Now on to CSS3 Webfonts (with SVG Fonts)
http://www.w3.org/TR/css3-webfonts/
September 1st, 2005 at 4:08 am
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
September 4th, 2005 at 8:22 pm
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.
September 9th, 2005 at 10:18 am
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)?
September 13th, 2005 at 1:35 pm
[...] on September 13th, 2005 Topics: css Since August 26, Apple has had some css3 goodies in WebKit to create various borders. On [...]
October 28th, 2005 at 7:43 pm
[...] ion of the border-image, background-clip, background-origin and border-radius properties. David Hyatt eloquently explains what these new properties do [...]
October 29th, 2005 at 2:16 pm
[...] ntroducing DomCorners » CSS3 Goodies - Borders and Backgrounds CSS3 Goodies - Borders and Backgrounds This entry was posted on Sa [...]
April 4th, 2006 at 4:23 am
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
May 30th, 2007 at 9:56 am
[...] using the prefix ‘-moz-’. And it works as described. I have seem mention that Safari supports [...]
November 20th, 2007 at 8:51 am
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.
November 20th, 2007 at 8:53 am
My apologies!
I meant to type:
I discovered this website a few days ago.
November 20th, 2007 at 11:05 am
@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.
November 20th, 2007 at 11:47 am
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.
November 20th, 2007 at 11:51 am
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.
November 20th, 2007 at 11:54 am
@Kurt: Take a look at http://www.css3.info/preview/rounded-border/ for an example of how to use border-radius. The
[-webkit-]border-radiusproperty is only for specifying the “roundness”. You must still make use of theborderproperty to set the border width, line style and colour.November 20th, 2007 at 1:01 pm
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