Best bit of advice I can give is to make use of the developer tools built into your browser. Chrome by the looks of it.
If you right click the header at Bukkit.org and click Inspect Element, you will see on the right handside basically all of the CSS rules which match that element.
Specifically
Code:
#recentNews .recentNews .subHeading,
#recentThreads .sectionHeaders
{
border: 0px;
font-size: 14px;
font-family: Georgia, "Times New Roman", serif;
color:
#777;
background:
#F1F1EC url('styles/flexile/xenforo/gradients/navigation-tab.png') repeat-x top;
padding: 10px 15px;
margin: 0 -15px 15px;
border-bottom: 1px solid
#D6D6D6;
border-top-left-radius: 6px;
-webkit-border-top-left-radius: 6px;
-moz-border-radius-topleft: 6px;
-khtml-border-top-left-radius: 6px;
border-top-right-radius: 6px;
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topright: 6px;
-khtml-border-top-right-radius: 6px;
}
So that should probably do it, but of course you may not have that background image available.
The best way to make CSS changes is to use EXTRA.CSS this is a style sheet that will never be updated during XenForo updates and allow you to make changes without overriding the original style. Make a mistake? Just delete the bits you've changed in EXTRA.CSS and it's back to how it was
Also bear in mind that a lot of this will be using Style Properties. If none of this makes sense, then try and find the Style Properties which gives you a nice looking easy to use interface to make these changes.
But - more importantly - it's not ideal to just borrow other people's code, experiment with these things and you'll quickly learn what works and what doesn't and you'll easily be able to define your own style.