Cool and effective CSS border styles for websites

post footer border
Among the CSS box model parts, border is one of the most important one. Border has a great importance for styling the HTML documents.
In this post we are discussing some unique, simple and effective user interfaces for it.


The HTML

<div id="border">
<img alt="Give short description about image" height="height of the image" src="" width="width of the image"/>
</div>



Simple style

1. Double border style


e2


#border img{
border-width: 4px;
border-style: double;
border-color: #000;
padding: 4px;
}

2. Double border(top and bottom)


e3


#border img{
border-top-width: 4px;
border-bottom-width: 4px;
border-top-style: double;
border-bottom-style: double;
border-top-color: #000;
border-bottom-color: #000;
padding: 8px 0px;
}

3. Double border with round corners


e2


#border img{
border-width: 4px;
border-style: double;
border-color: #000;
border-radius:15px;
-webkit-border-radius:15px;
-moz-border-radius:15px;
}

4. Using Ridge border style


e2

#border img{
border-width: 10px;
border-style: ridge;
border-color: #e3e3e3;
}

5. Using Grove border style


e2

#border img{
border-width: 10px;
border-style: grove;
border-color: #e3e3e3;
}
Note : You can change the border style by any of these solid(for single border), dotted , dashed, ridge, inset, outset.

New UI


e3

#border img {
width: 400px; height: 400px;
background: #cacaca;
border-top-left-radius: 15em 1em;
border-bottom-right-radius: 15em 1em;
border-color:#000;
}

Using Psuedo Class

1. Simple style
ex1

#border img {
background: #f4f4f4;
border: 1px solid #bbbbbb;
width: 200px;
height: 200px;
margin: 60px auto;
position: relative;
}

#border img:before {
border: 1px solid white;
content: '';
width: 198px;
height: 198px;
position: absolute;
}

#border img:after {
content: '';
position: absolute;
width: 196px;
height: 196px;
border: 1px solid #bbbbbb;
left: 1px; top: 1px;
}


2. Advanced style
ex2


#border {
width: 400px;
height: 240px;
border-radius: 3px;
position: relative;
background-color:#f4f4f4;
padding:5px 10px 15px 0;
}
#border, #border:before, #border:after {
background: #f4f4f4;
border: 1px solid #ccc;
}
#border:before, #border:after {
content: "";
position: absolute;
bottom: -3px;
left: 2px;
right: 2px;
height: 1px;
border-top: none;
}
#border:after {
left: 4px;
right: 4px;
bottom: -5px;
box-shadow: 0 0 2px #ccc;
}

Famous border style

1. Without shadow
ex2


#border img{

display: block;
margin-left: auto;
margin-right: auto;
padding:8px;
border:solid;
border-color: #dddddd #aaaaaa #aaaaaa #dddddd;
border-width: 1px 2px 2px 1px;
background-color:white;
}


Recent Posts

AD Setting