In this tutorial i will teach you how to create a simple css rounded border content box with a blue gradient background in css…
Lets Start the Beginning
First of all we have to create the html, Copy and Paste the below html code in your “<body>” tag of your html file:
<div id="contentbox"> <div class="title">» Styling a Css Content Box in Css</div> <div class="content">Ut nonummy habent soluta claritas veniam. Typi nunc soluta hendrerit mutationem sollemnes. Quis lius dolore et insitam vel. Aliquip consequat futurum claram ut mazim. Facilisi accumsan dolore ii imperdiet consequat. Claritatem aliquip quod putamus vulputate iusto. Doming minim typi zzril lius usus. In clari mutationem autem non sit. Qui augue mirum dynamicus gothica ut. Demonstraverunt processus soluta sequitur autem demonstraverunt.</div> </div>
Background Image
click on the below link to save the background image, save the image in your folder:
- background.gif
Styling Content Box in CSS
Okay, now we are going to style the “<div id=”contentbox”>”, add the following css in your “<head>” tag of your html file, or add to your .css file:
#contentbox{
padding:0;
margin:0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border:2px solid #b8c6dd;
width:450px;
}
Some browser doesn’t support rounded corners borders, so we used “-webkit-border” and “-moz-border-radius” for multiple browser support, so in the above code “-webkit-border” is used for WebKit equivalent, and“-moz-border-radius” is used for Mozilla equivalent, to know more about this please go here.
Now we are going to style the “<div class=”title”>”, add the following css:
#contentbox .title{
background-image:url(background.gif);
background-repeat:repeat-x;
padding:13px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:25px;
color: #FFF;
font-weight:bold;
text-shadow: #069 1px 1px 1px;
}
background-image: Copy & Paste the url of the background where you save it.
Now we are going to style the “<div class=”content”>”, add the following css:
#contentbox .content{
font-size:16px;
color: #666;
font-family: Tahoma, Geneva, sans-serif;
padding:6px;
line-height:24px;
border-bottom:15px solid #b8c6dd;
}
line-height: this is used for changing the height of each lines in css.
Putting All Css Together
#contentbox{
padding:0;
margin:0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border:2px solid #b8c6dd;
width:450px;
}
#contentbox .title{
background-image:url(images/background.gif);
background-repeat:repeat-x;
padding:13px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:25px;
color: #FFF;
font-weight:bold;
text-shadow: #069 1px 1px 1px;
}
#contentbox .content{
font-size:16px;
color: #666;
font-family: Tahoma, Geneva, sans-serif;
padding:6px;
line-height:24px;
border-bottom:15px solid #b8c6dd;
}