Template Categories

templates categories Automobiles
templates categories Business
templates categories CSS Templates
templates categories E-Commerce
templates categories Education
templates categories Fashion
templates categories Greeting Cards
templates categories Hotels
templates categories Jewelry
templates categories kids
templates categories Models
templates categories Music - Films
templates categories Night Club
templates categories Real Estate
templates categories Restaurant
templates categories Software
templates categories Sports
templates categories Travel
templates categories Web-design
templates categories Wedding

Tutorial Categories

tutorial categories AJAX
tutorial categories CSS
tutorial categories Dreamweaver
tutorial categories Flash
tutorial categories FTP - File Transfer
tutorial categories HTML Emails
tutorial categories Javascript
tutorial categories Microsoft Excel
tutorial categories Microsoft Windows
tutorial categories Microsoft Word
tutorial categories MySql
tutorial categories Photoshop
tutorial categories Php
tutorial categories Windows Movie Maker
tutorial categories Xhtml / Html
CSS IMAGE TRICKS - TABLELESS CONTENT BOXES

CREATE CONTENT BOXES WITH IMAGES


Mini News

This is the main content holder. This is the main content holder. This is the main content holder. This is the main content holder. This is the main content holder. This is the main content holder. This is the main content holder. This is the main content holder. This is the main content holder. This is the main content holder. This is the main content holder. This is the main content holder.



Mini News

This is the main content holder. This is the main content holder. This is the main content holder. This is the main content holder. This is the main content holder. This is the main content holder. This is the main content holder. This is the main content holder. This is the main content holder. This is the main content holder. This is the main content holder. This is the main content holder.
In this tutorial I will show you how you can manipulate images to create rounded content boxes used for news, login, search and other stuff on a webpage. First the CSS code.

<style>
.mainholder {
width: 350px;
background-image:url(bg.gif);
background-repeat: repeat-x;
padding: 10px;
background-color: #0B3865;
border: 1px solid #CCC;
}
.innerbox-bot {
width: 300px;
background-image: url(bot-round.gif);
background-repeat: no-repeat;
background-color: #F78C0C;
background-position: left bottom;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color:#FFFFFF;
}
p {
padding: 10px;
}
h1 {
background-image:url(top-round.gif);
background-repeat:no-repeat;
background-position:left top;
padding: 15px 10px;
}
h3 {padding: 5px 10px;
}
</style>

Let me explain th above code. mainholder class sets the outer box with gradient image as background. repeat x , will expand the background image horizontally. The background colour property is necessary as it will merge wih the lower part of the background image. This will give a nice gradient look to the outer box in case the height of the box is more than the background image.
Now, the inner content boxes with rounded edges. The class innerbox-bot gets us the bottom rounded corners. Three parameters which are very important : :

1. width: 300px;
2. background-image: url(bot-round.gif);
3. background-position: left bottom;

The above code is self explanatory, except for the position, which we are setting to left bottom. The width of the DIV box should be same as background image.
For the top rounded corners we will attach the background image property to h1 tag. Here the important parameter is

background-position:left top;

This is how rounded corners content boxes can be created using CSS.
Here are the two images used for top and bottom corners

CSS rounded corners

CSS rounded corners
The HTML code

<div class="mainholder" style="background-color:#0B3865;">
<div class="innerbox-bot" style="margin: 0 auto;">
<h3>Mini News</h3>
<p>
This is the main content holder. This is the main content holder. This is the main content holder. This is the main content holder. This is the main content holder. This is the main content holder. This is the main content holder. This is the main content holder. This is the main content holder. This is the main content holder. This is the main content holder. This is the main content holder.</p>
</div>
<div class="innerbox-bot" style="margin: 0 auto;">
<h1>Mini News</h1>
<p>
This is the main content holder. This is the main content holder. This is the main content holder. This is the main content holder. This is the main content holder. This is the main content holder. This is the main content holder. This is the main content holder. This is the main content holder. This is the main content holder. This is the main content holder. This is the main content holder.</p>
</div>
</div>
Hope you have enjoyed this tutorial on creating rounded corners in CSS.