The CSS3 border-radius property can be a little tricky when used as a shorthand property. The sad truth is that at the time of this writing some browsers support this property as a proprietary extension (for example, -moz-border-radius and -webkit-border-radius) with proprietary notations that can vary from a browser to another when it comes to single border properties, so using the shorthand version is a good thing to avoid confusion.

Anyway, most developers think that this property works exactly as other border properties, that is, following the order top-right-bottom-left. Right? Almost. Here are the exact values used for the border-radius shorthand property in the correct order:

border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius

These values set:

1. the top right border
2. the bottom right border
3. the bottom left border
4. the top left border

Let's say that you want to set only the top left and bottom right borders of a box. You can write something like this:

#box {
  background: gray;
  -moz-border-radius: 0 6px 0 6px;
  -webkit-border-radius: 0 6px 0 6px;
  border-radius: 0 6px 0 6px;
}

Note that we've used the proprietary extensions first. This is considered a good practice to make sure that a browser will always use the standard property, if it supports it.

What is, in its essence, the CSS3 :not pseudo-class? It's a filter that is used to separate certain elements from others depending on the presence of a certain condition. In technical terms, this pseudo-class uses a Boolean expression that negates a given condition. In human terms, it tells the browser not to consider an element with a given condition. For example:

p:not([class]) {
    color: green;
}

We're telling the browser to match each p element which has not a class attribute set on it. Very simple. Another example:

a:not(:link) {
  text-decoration: none;
}

In this case, we're matching an a element which is not a link (e.g. an anchor). As you can see, this pseudo-class negates the given condition. More information at http://www.w3.org/TR/css3-selectors/#negation.

Check out this SlideShare Presentation:

CSS @font-face : Personalized fonts

View more presentations from Yves Van Goethem.

I've just posted this message on www-style containing my proposal for a new property to be added to the CSS3 Box Model module. My idea is quite simple: using a specific property instead of a RGBA color value for the border-color property. Hopefully they get it the right way. Stay tuned!

Beginning HTML5 and CSS3: Next Generation Web Standards is a new book on HTML5 and CSS3 that is up to be released (see Amazon). As always with Amazon, there's also a brief insight of book contents:

If you are a web developer, then Beginning HTML5 and CSS3 is your introduction to the new features and elements of HTML5—all the leaner, cleaner, and more efficient code you’ve hoped for is available now with HTML5, along with some new tools that will allow you to create more meaningful and richer content. For everyone involved in web design, this book also introduces the new structural integrity and styling flexibility of CSS 3—which means better-looking pages and smarter content in your website projects.

For all forward-looking web professionals who want to start enjoying and deploying the new HTML5 and CSS3 features right away, this book provides you with an in-depth look the new capabilities—including audio and video—that are new to web standards. You’ll learn about the new HTML5 structural sections, plus HTML5 and CSS3 layouts. You’ll also discover why some people think HTML5 is going to be a Flash killer, when you see how to create transitions and animations with these new technologies. So get ahead in your web development through the practical, step-by-step approaches offered to you in Beginning HTML5 and CSS3.

This seems interesting and I've already added this book to my wish list. Oh, but there's also the new book of Mark Pilgrim on the subject. So, which will be? One? Both? I don't know!

Check out this SlideShare Presentation:

Web Typography with CSS3

View more presentations from Matthew Smith.

I've just finished to upload a new test which combines the CSS3 box-shadow and border-radius properties. The code is as follows:

 div.pic {
    
        width: 260px;
        height: 200px;
        background: maroon;
        position: relative;
        border-radius: 8px;
        -moz-border-radius: 8px;
        box-shadow: #666 5px 5px 5px;
        -moz-box-shadow: #666 5px 5px 5px;
        -webkit-box-shadow: #666 5px 5px 5px;
        margin: 0 auto;
}

You can see this test here.

Useful and interesting insights on CSS3.

[Worskhop Summits] CSS3 Workshop

View more presentations from Christopher Schmitt.

Check out this SlideShare Presentation:

Progressive Enhancement using CSS3

View more presentations from Marc Tobias Kunisch.

Check out this SlideShare Presentation:

Webkit CSS3 Development

View more presentations from rbiggs.

Check out this SlideShare Presentation:

CSS3 For WebKit: iPadDevCamp Presentation

View more presentations from estellevw.

Before CSS3, if you wanted to achieve the effect of a box with rounded corners, you had to write a markup like this:

<div id="box">
  <div id="box-top-right">
    <div id="box-bottom-left">
   <div id="box-content">
   </div>
  </div>
  </div>
</div>

with the following styles:

#box {
  width: 250px;
  background: #d16c00 url("img/topleft.gif") no-repeat 0 0;
  color: #fff;
}

#box #box-top-right {
    background: transparent url("img/topright.gif") no-repeat 100% 0;
}

#box #box-bottom-left {
  background: transparent url("img/bottomleft.gif") no-repeat 0 100%;
}
#box #box-content {
background: transparent url("img/bottomright.gif") no-repeat 100% 100%;
padding: 10px;
}

You can see the result here. Of course all this markup is rather redundant and non-semantical. CSS3 makes life a lot simpler by allowing an element to get multiple background images. To begin, all the markup now needed is simply this:

 <div id="box"></div>

Then we add a single CSS rule:

#box {
  width: 240px;
  background-color: #d16c00;
  background-image: url("img/topleft.gif"), url("img/topright.gif"), url("img/bottomleft.gif"), url("img/bottomright.gif");
  background-repeat: no-repeat;
  background-position: 0 0, 100% 0,  0 100%, 100% 100%;
  color: #fff;
  padding: 10px;
}

As you can see, the background-image and background-position properties now accept up to four values, so that we can add and position four different background images. You can see the final result here.

A tabbed menu with CSS3 rounded corners is quite simple to build. To begin, here's a basic navigation menu:

<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Demos</a></li>
<li><a href="#">About</a></li>
</ul>

Now let's add some styles:

#navigation {

  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  border-top: 0.5em solid #fff;
  border-bottom: 0.4em solid #666;

}

#navigation li {

  float: left;
  height: 2em;
  margin: 0 0.5em;

}

#navigation a:link,
#navigation a:visited {

  float: left;
  height: 1.6em;
  padding: 0.2em 0.5em;
  background: #666;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  border-width: 0.1em 0.1em 0 0.1em;
  border-style: solid;
  border-color: #666;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  line-height: 1.6em;
  position: relative;
  top: 0.3em;

}

#navigation a:hover {

  text-decoration: underline;

}

Our navigation menu has a solid bottom border. By using relative positioning on each link, we actually make the rounded bottom borders disappear. It's important to note that the lengths used on the navigation menu bottom border must be proportional to the length used with relative positioning. Note that you need to set the overflow property instead of giving an height to the menu in order to make it work on Opera (thanks to Daniele Grillenzoni for the suggestion). You can see the final result here.

Check out this SlideShare Presentation:

CSS3 Media Queries

View more presentations from Russ Weakley.

A couple of days ago, Internet Explorer developers have announced that IE 9 will now support all the CSS 3 selectors. That includes also a pseudo-class like :selection:

However, we have to wait until the final release of IE 9 will be shipped to see if their implementation is correct. In fact, claiming that IE 9 passes all the tests of css3.info doesn't necessarily mean that it's bug-free. In the meantime, stay tuned with the CSS Test Suite to get the latest test cases from Microsoft.. but wait, they actually provided no tests on CSS 3 selectors! See http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/ for more details.

CSS 3 rounded corners are still not well supported by all browsers. Anyway, with the next release of Internet Explorer 9, this feature will gain its momentum. Here's an interesting video tutorial on the subject.