CSS Rounded Corners

For wordpress, the sidebar items such as comments, recent posts, etc, I was wondering if there is an easy way of using css to style the individual boxes so that they are not square, but rather have rounded corners?

 

You could use one of the many rounded-corners ideas out there. I'm not on my computer so I don't have the bookmark, but deathshadow has one I've used on my site. The idea is, you need to add some "sandbags" to your HTML (deathshadow uses <b> tags, csswiz uses <spans> and <td>s for tables) and then you style them with margins and colours. I'm not sure any of them let you have multiple colours per corner though, that'd be hard.

Eh, I'll have to post it later, can't find it. I did use it on a site I'm working on, http://stommepoes.nl/Guis/guis.html

Look in the code for a class called "rond" and you'll see the b's. It's pretty much a copy from deathshadow's except I only have the one class, not two, and I only rounded the tops, not the bottoms.

 

If you really want something simple:

<div class="item">
<h2>Recent Comments</h2>
<ul><li><a href="#...></li></ul>
<span></span>
</div>

HTML:

and

.item {
background: url(itemtop.jpg) no-repeat center top;
width: xx;
}
.item span {
display: block;
width: xx;
height: xx;
background: url(itembottom.jpg);

HTML:

And you should change width: xx to your width;
Than create two images: itemtop.jpg and itembottom.jpg representing the top part and the bottom part of the box.
Than change height: xx; with the height of the itembottom.jpg

It is not very-mega-ultra SEO, it will cost you about 2-3bytes of data but it`s very simple.

 

When you say it's not ultra SEO, is there something with this code that would affect SEO ranking in the search engines?

 

If you use Stomme_poes version you probable save some bytes, but very-very little bytes.
But SEO is perfect ok

 

I would assume that by CSS corners, you mean CSS ONLY - no images. That's a bit tricky, but I have a page that explains it:

http://battletech.hopto.org/html_tutorials/rounded_css_borders/

If using images, I suggest using ONE image, but using sliding doors - The approach SorelMihai listed is only really useful on FIXED WIDTH - a better approach would be to have:

<div class="contentBox">
	<div class="borderTop"><div></div></div>
	<div class="borderLeft"><div class="borderRight">
		Content Here
	<!-- .borderRight, .borderLeft --></div></div>
	<div class="borderBottom"><div></div></div>
<!-- .contentBox --></div>

Code (markup):

It's all div's so it should have ZERO effect on search engines (anyone who tells you otherwise is full of shit). The image, for this example we'll assume you'd never have a user running higher than 2048 pixels wide - should be 4096x16, assuming 8px rounded corners. The left half would be the four corners and top/bottom, while the right half would be the two sides and the content area.

borderTop and borderBottom both share a lot of parameters:

.borderTop,
.borderBottom {
	position:relative;
	height:8px;
	margin-right:8px;
	font-size:1px; /* make IE behave on shorter heights */
	background:url(images/borders.png) 0 0 no-repeat;
}

Code (markup):

Position:relative lets us absolute position their child div, the margin makes room so that if we use transparencies on the corners they'll work. Simple font size hack, and then the image. the only difference is the bottom gets a different 'part' of the image... just slide the background up 8px.

.borderBottom {
	background-position:0 -8px;
}

Code (markup):

The contained DIV needs to be absolute positioned, and to show the 8px by 8px corners, which in our image should be at 2040px,0 and 2040px,8px respectively.

.borderTop div,
.borderBottom div {
	position:absolute;
	top:0;	
	right:-8px;
	width:8px;
	height:8px;
	background:url(images/borders.png) -2040px 0 no-repeat;
}

.borderBottom div {
	background-position:-2040px -8px;
}

Code (markup):

Then the left and right borders - we use a margin so if it's a 'jagged' image or uses transparancy it won't overlap, while some padding prevents the nested one from overwriting it's parent.

.borderLeft {
	background:url(images/borders.png) -2048px 0 repeat-y;
	margin-right:8px;
	padding-left:8px;
}

.borderRight {
	position:relative;
	margin-right:-8px;
	background:url(images/borders.png) top right repeat-y;
}

Code (markup):

You can see this technique in action here:
http://battletech.hopto.org/html_tutorials/eightcorners/template.html

Now, if you don't want to use images, and don't want to or are unable to edit the HTML, then you are likely **** out of luck... In theory CSS3 includes some psuedoclasses which would let one do it - but being that 70% or so of users have no access to having ANY of that actually come close to working, it's not really an option.

Another option would be generating the extra HTML via javascript, like I did in this example:
http://battletech.hopto.org/html_tutorials/borderimages_javascripted/template.html

But Opera has issues with that on first load. (which you can work around with more javascript)... but that one is particularly nice because that whole page only uses two images, the markup is kept uber clean, and it degrades to normal square cornered boxes with javascript off.

Oh, and the master directory for all my coding examples is unlocked - feel free to use what you like.
http://battletech.hopto.org/html_tutorials