Are some CSS styles more "expensive" than others?

I think we'll see real difference in performance only with tens of thousands of elements otherwise it'll stay in the millisecond margin.

So my advice it to stick with the most readable/simple way which is probably adding the "direct" border to the first toolbar. :)

What a timely question!

I read this excellent article a couple of days ago about performance for CSS. Granted that CSS selector performance is tiny compared to the effort expended on serving an entire page, but it's still something to keep in mind.

http://css-tricks.com/efficiently-rendering-css/

EDIT

I didn't notice that the question was about CSS rules and not selectors. Trying to answer that question now.

Like I said in my original answer, CSS performance is the area you'll be able to gain the least amount of performance in your system (generally, unless you're using things like filters), and should be addressed last if you want to micro tune your site. It's better to keep it readable and work on the other parts of your site first.

Without knowing the which browser, and how the css is implemented, how the elements are rendered, which can vary by platform hardware, It's very difficult to find out. What may be slow today might be fast next month( and vice versa!)

About the only assumption you can make is that all browser vendors want their code to perform as fast as possible...

Keeping your CSS readable, consistent, and maintainable is much more important than 'performance'.

personally I think your second option is the best, you're adding a border so use border ;) - however I'd do it reverse and add the border to the second toolbar.. imagine you have more than 2, what you actually want is for the second and subsequent ones to have a top border, but not the first

.toolbar { border-top: 2px solid #fff }
.toolbar.first { border: 0;}

that way that .first class is doing it's job and specifically overriding