Creating CSS Border in 2 easy Steps

Today we will be creating borders for our web page using CSS. If you are a web designer or developer, then I am sure that you must be aware of the invincible flexibility that CSS offers to any static as well as dynamic web page. I too got to experience the power of CSS with you while writing some tricky( & funny as well !) CSS codes during earlier posts on justskins.

So beginning with the tutorial, we will first write the html code which will interact with the CSS code. The HTML code required here is pretty simple. We will be utilizing four areas of the web page to create border i.e left, right, top & bottom. Hence, we will first assign four <div> ids to the above mentioned page elements.
Step 1: Here’s the HTML code:

<div id=”left”></div>
<div id=”right”></div>
<div id=”top”></div>
<div id=”bottom”></div>

Step 2: We will write a CSS code which can interact with the four div elements in HTML. The CSS code written below is quite straightforward & most of the properties used there are being shared by either all or by a group of two elements.

<style type=”text/css”>
#top, #bottom, #left, #right    <!– Common properties for all elements –!>
{
background: #ff9900;
position: fixed;
}
#left, #right
{
top: 0; bottom: 0;                <!– Expanding left, right borders from top to bottom –>
width: 15px;                        <!– Here width = 15px while height = max –>
}
#left { left: 0; }                     <!– Fixing the Left border with Left –>
#right { right: 0; }                <!– Fixing the Right border with Right –>

#top, #bottom
{
left: 0; right: 0;                   <!– Expanding top, bottom borders from left to right –>
height: 15px;                     <!– Here height = 15px while Width = max –>
}
#top { top: 0; }                   <!– Fixing the Top border with Top –>
#bottom { bottom: 0; }     <!– Fixing the Bottom border with Bottom –>
</style>

Here’s the final output

You might also like:

1. Creating Navigation Menus with CSS
2. Creating Dynamic Stylesheets with PHP – Part 1
3. Creating Transparent Border effects
4. PHP + CSS = Auto update your web pages
5. CSS Tricks for Dummies!

Tags: css border, css tutorial