Round border in wordpress posts

Written by Chaks

Topics: Wordpress

  My First Rounded Border  
  Round Cornered borders (like this post’s border) is always looks nicer and it is a first choice to not only me but also many web designers. We can use round corners in two ways. one is using tables which is a old fashioned, and another approach is using style sheets (CSS). I wanted to use CSS for this post but wordpress has restricted the use of certain style tags. If some body wanted to use external CSS they should pay a little amount to wordpress. At present i am not interested to upgrade my account as i am not that much proficient in CSS. So i decided to go ahead with tables and images. Using CSS it is possible to create a round cornered table without using a single image. These are the images used to build this table: Top Left, Top Right, Top Middle and a Transparent Spacer. All these images are made as transparent so that they can give same round effect irrespective of the page background color. The HTML Code is…===================================================

<table style=”table-layout: fixed” border=”0″ cellpadding=”0″ cellspacing=”0″ width=”100%”>
<td style=”background-image: url(‘bskin1_tl.gif’)” height=”20″ width=”15″></td>
<td style=”background-image: url(‘bskin1_tm.gif’); text-align: center;” height=”20″>HEADING</td>
<td style=”background-image: url(‘bskin1_tr.gif’)” width=”15″></td>
</tr><tr><td style=”background-color: #bed0ff”></td>
<td style=”font-size: 8pt; text-align: justify; background-color: #bed0ff; padding-top: 10px; padding-bottom: 5px”>BODY CONTENT</td>
<td style=”background-color: #bed0ff”></td></tr>tr>td colspan=”3″ style=”background-color: #779eff” height=”3″></td>/tr>/table>


The drawback of this table approach is the huge html code instead of the actual text. Using style sheet languag, we can separate the layout format with actual text. So if you are proficient in CSS and want to use style sheets then go ahead and upgrade your account by paying little amount to wordpress.

I created these images using Paint.NET and it is my first test on image creation. There are some other round types are applied to other pages of my blog. But those images are grabbed from internet.


2 Comments For This Post I'd Love to Hear Yours!

  1. lgirl says:

    Its not a new one, but table looks good. I want it in CSS, can you give a site which has best CSS implementation

  2. Good post. I learn something new and challenging on websites I stumbleupon on a daily basis.
    It’s always interesting to read content from other writers and use a little something from other web sites.

Leave a Comment Here's Your Chance to Be Heard!

Web Statistics