Using CSS borders on your HTML web pages should not at all be taken lightly. CSS borders hold a lot of power when it comes to making or breaking through in Web Design. Yes I am not really a designer so this just goes to show how easy Styling your next project well with CSS borders can make a huge difference yet it does not need to be a pain in the neck.

Rounded Borders Using Nothing But DIVs

I have not used this technique in quite a while now. I have this thing that once I try it out and get the hang of it, I tent to move to other experiments. Anyway your can use a bunch of DIV containers to create a carved, CSS bordered panel that looks good and sleek but not a single image on site. Here is what it looks like:

Here is the CSS code for the Panel above:

.a
{
height: 1px ;
margin: 0px 5px 0px 5px;
background: #a7a6aa ;
}
.b
{
height: 1px ;
background: #ffffcc ;
border-left: 2px solid #a7a6aa;
border-right: 2px solid #a7a6aa;
margin: 0px 3px 0px 3px;
}
.c
{
height: 1px ;
background: #ffffcc;
border-left: 1px solid #a7a6aa;
border-right: 1px solid #a7a6aa;
margin: 0px 2px 0px 2px;
}
.d
{
background: #ffffcc;
border-left: 1px solid #a7a6aa;
border-right: 1px solid #a7a6aa;
margin: 0px 1px 0px 1px;
height:2px;
}
.e
{
border-left: 1px solid #a7a6aa;
border-right: 1px solid #a7a6aa;
background: #ffffcc;
}
.paddings
{
padding: 7px;
}

Here is the HTML Source for the Panel Above

<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e">
<div class="paddings">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur..

</div>
</div>
<div class="d"></div>
<div class="c"></div>
<div class="b"></div>
<div class="a"></div>

Rounded Corners Using Images

There is another way of getting a container wrapped in a rich styled border and background. This one involves using three images and a little HTML and CSS to line them up properly. With this you may need a graphics editing software to be able to create the image and slice it into bits accordingly.

Using these these three images…

You can achieve this effect:

With this CSS code:

.top
{
background-image: url(top.png);
width: 300px;
height: 29px;
}
.mid
{
background-image: url(mid.png);
background-repeat: repeat-y;
width: 300px;
}
.bottom
{background-image: url(bottom.png);
width: 300px;
height: 31px;
}
.pad
{
padding: 12px;
}

And this HTML code:

<div class="top"></div>
<div class="mid"></div>
<div class="pad"></div>
<div class="bottom"></div>

Framing images With CSS Borders

Using borders without hidden tricks can get you some pretty interesting CSS borders that act as frames around images. These can act as styling options for online image galleries. Depending on how you mix and much your colors, you could end up with stunning effects.

This image CSS Border effect:

Was achieved with this CSS code

.ball8
{
border-top: #D1B75C 10px solid;
border-right: #EBD27B 10px solid;
border-bottom: #EBD27B 10px solid;
border-left: #D1B75C 10px solid;
padding: 2px;
}

This image CSS Border effect:

Was achieved with this CSS code

.blue8
{
border: 10px groove #1922E3;
padding: 2px;
background-color: #000;
}

This image CSS Border effect:

Was achieved with this CSS code

.nature8
{
border: 10px dashed #749C39;
padding: 2px;
background-color: #B1C8CE;
}

Separating Content Sections Using CSS Border Styling

CSS can be used to separate content in a logical manner using CSS Border Styling. The thing with Containers is that they have four edges, which of course consist of four borders. CSS is able to style each of these borders independently. So we can take advantage of this feature and create borders that split content on a HTML web page. Here is an example of a CSS border styling that visually splits content:

Here is the CSS style sheet for the above Panel

#main{
width: 590px;
}
.sileft{
float: left;
width: 190px;
background: #ffffcc;
border-right: 1px dashed #000000;
min-height: 300px;
}
#three{
border-right: none;
}
.padder{
margin: 10px;
margin-top: 0;
}

Here is the HTML code for the Above Panel

<div id="main">
<div class="sileft">
<div class="padder">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
</div>
<div class="sileft">
<div class="padder">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
</div>
<div class="sileft" id="three">
<div class="padder">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>