I’ve just spent some time to apply some better styles to the comments in my blogs. If you take a look at a previous post with some comments or leave some here, you will see the following changes:

• Added background colours and hover styles to the comments.
• Added rounded corners for Gecko based browsers or any UA that support’s CSS3’s ‘border-radius‘ property.
• Added Additional highlight for comments from myself.

The additional highlight for comments from me was a little bit of a challenge to work out how to do. I realised that all comments from contain me contain a link to my blogger profile. So, I was able to use that as a hook for the styles:

.comment-author a[href="http://www.blogger.com/profile/3043458"] {
    background: #BECFFB;
    margin: -1em 0 .5em -1em;
    padding: 1em 1em .5em;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

As a result, it only works for browsers that support the attribute selector (at least Firefox and Opera¬), and I could only apply the additional style to the one element. So, it’s quite a small addition, but it’s enough to highlight my comments with a darker blue box around my name.

Are these styles visually appealing? Can you suggest any improvements? What do you think of the way I highlighted my comments? Let me know what you think, and I’ll fix up the styles based on your comments, if necessary.