Hopefully, there is one another method, that is, making separate user account for you. But still I am going to teach you how you can disable the auto hide feature of Windows Taskbar.

Though it is possible to disable autohide feature from Registry editor, we are not going to do this. Because tweaking registry may risk your current computer status. Instead, we’ll be using Local Group Policy editor.

Open Local Group Policy Editor by going to RUN > and typing gpedit.msc.

In the left column, go to User Configuration > Administrative Templates > Start Menu and Taskbar.

In the right column, look for Prevent Changes to Taskbar and Start Menu Settings under Setting column.

Double Click to Open it. By default, it is set to Not Configured and choose Enabled.

Next Click on OK, and then close Policy Editor Window.

Whenever someone wants to access the Taskbar property, he’ll be denied.

To re-enable it, follow same procedure and Click on either Not-configured or Disabled radio button and Press OK.

Hope you loved it.

This was guest post by suraj kayastha where he writes about technology in HackTweak.co.cc and Hacktutors.info.

First view the demo here.

You might be surprised that this manipulation can be done just by PHP code not more than 30 lines.
We’ll do this just by a PHP code.

Let me show you how can you use PHP imagecreatefromjpeg() function to manipulate the pixeleted image in ASCII character form.
First of all let’s summarize what we’ll do.

First, we’ll create a variable pointing the location of the image. Now we’ll feed that image location variable to imagecreatefromjpeg() function like this:

$locate= 'http://website.com/image.jpg';
$image = imagecreatefromjpeg("$locate");

Now the imagecreatefromjpeg() function manipulates the image details like RGB color coding, white pixels etc.

Since our PHP code have the details of the image, we’ll add conditional tag what to do next if the image have been manipulated by the imagecreatefromjpeg() function. In the conditional statement we’ll fetch the RGB value, get the brightness situation and finally put a ASCII character along with the brightness.

What our code needs to do is loop through each row in the image, and within each row it needs to also loop through each column. This means we’re accessing each pixel one-by-one, which is what we need. Then, for each pixel in the image, we need to grab the red, green, and blue color values of the pixel, add them all together.

By default, we’ll define the ASCII keys as array for the brightness. For example, [@#+*;:, ] we’ve increasing brightness symbol from @ which denotes the extreme dark and a white space at last which denote extreme white.

The darker part will be replaced by @ and white part will be replaced by white space, while other characters will denote the level of brightness in eight characters.

Have a look at the PHP code below:

echo '<PRE STYLE="font: 1px/1px Courier New;">';

$asciichars = array("@", "#", "+", "*", ";", ":", ",", ".", "`", " ");

$width = imagesx($image);

$height = imagesy($image);

for($y = 0; $y < $height; ++$y) {

for($x = 0; $x < $width; ++$x) {

$thiscol = imagecolorat($image, $x, $y);

$rgb = imagecolorsforindex($image, $thiscol);

$brightness = $rgb['red'] + $rgb['green'] + $rgb['blue'];

$brightness = round($brightness / 85);

$char = $asciichars[$brightness];

echo $char;

}

echo "\n";

}
echo '</PRE>';

}

And finally we’ll print the result.

The final code will be like this:

<?php

$locate= ‘http://website.com/image.jpg’;

$image = imagecreatefromjpeg("$locate");

if ($image) {

echo '<PRE STYLE="font: 1px/1px Courier New;">';

$asciichars = array("@", "#", "+", "*", ";", ":", ",", ".", "`", " ");

$width = imagesx($image);

$height = imagesy($image);

for($y = 0; $y < $height; ++$y) {

for($x = 0; $x < $width; ++$x) {

$thiscol = imagecolorat($image, $x, $y);

$rgb = imagecolorsforindex($image, $thiscol);

$brightness = $rgb['red'] + $rgb['green'] + $rgb['blue'];

$brightness = round($brightness / 85);

$char = $asciichars[$brightness];

echo $char;

}

echo "\n";

}

echo '</PRE>';

}

?>


Just copy it to your notepad and save it as image.php. Before saving define the location of picture.
You can also create a form to specify the location of the image and input the form value in $locate variable.
Posibilities are endless, who knows one can start his own website only with this script.
Again, view the demo here.

If you are already known to the hacking world then, welcome to the virtual simulation world of hacking environment.

If you really need some easy platform to practice hacking then I think this article will be a great help for you. Yes I am talking about the real hacking game, Hack The Game.

HackTheGame is a free 1MB file game which will introduce you to the real hacking word.

The real hack able DOS environment makes you feel like that you have finally accessed to US Defense system.

The game becomes much more interesting and fun because of the addition of sounds. The sounds includes typing and several warning announcement.

The user interface of HackTheGame is very friendly and easy. Just open the program and select your language, input any ID you may like.

There are several missions of this game. You’ll get the briefing of each mission in your inbox.

The mail itself includes several hints and processes.

If you find sounds irritating then, you can go to settings menu and disable sounds. But I bet you, enabling sounds makes your game play experience very easy.

I bet you’ll love this game.

No installation is needed to run this game and it is obviously safe to use because it utilizes local files which in game play acts as a remote files. You don’t have to worry about your security. If you doubt it, then play it offline.

This game can be downloaded from here, HackTheGame.

Since you have lots of email account in several domains, it is necessary to run their own messenger. Try to log in using your Gmail or Yahoo account, messenger will return with 80048821 error saying, Windows Live ID or Password is incorrect, because Gmail is not domain of MSN.

But after following this trick, you won’t have to open install multiple web messengers. Let met guide you how you can access Windows Live Messenger using your own email account which is not a domain of MSN. You’ll be able to login using Gmail, Yahoo or any email account you have.

Go to http://www.passport.net, after the page is loaded scroll down to Sign up today. As shown in figure, click on Get Started Now link of Use an e-mail address you already have.

Now fill up the form with the email address you want to sign up using Windows Live Messenger and other necessary information and click on Continue button.

In next page, retype the email address as shown in the left.

Now, it will inform you to confirm your account in next page. Click on Continue button.

Now you may close the page.

Next, we’ll need to confirm our mail. They’ll send you a confirmation link in the email address that you’ve specified earlier during form fill up.

Login to your Gmail or any email account using respective domain and look for Verification mail from Windows Live Team.

Read the mail properly and click on the confirmation link

Wait a minute! Confirmation is not over yet, you’ll have to login with the new email address and password that you’ve filled up earlier in the form.

For the successful confirmation, you’ll be welcomed to this page.

Now try to login using your Gmail or any email account from Windows Live messenger.

Note: If you have not confirmed properly you’ll be notified.

If you see this screen at the top of your Windows Live Messenger, make sure that you’ve confirmed properly.

Hope this tutorial was really helpful to you.

1. Create a very basic Wordpress widget acceptable for even version Wordpress 3.0.1
2. Create a basic upcoming events widget which lists the scheduled articles.

Wordpress is created in PHP. So, you must know the basic coding knowledge in PHP. Except default Wordpress widgets, you’ll need to create a separate plugin to add separate thirdparty widget to your wordpress blog.

We are going to create a basic plugin first.

Before we start the coding part, lets go to Wordpress Admin panel and explore through the plugin control panel.

To go to Plugin control panel, at the left sidebar, click on Plugins.

This is the place where you can activate/disactivate or install/remove plugins. By default Wordpress stores all the plugin files in wp-content/plugin folder.

For each plugin, you can see various definations. The basic definations needed are, plugin name, plugin URI, description, author name, version and author’s website.

These all will be defined inside the plugin php code.

Let me show you how you can set the details of plugin and start the coding for new plugin.

Open up notepad, a very simple yet powerful text editor by Microsoft.

We must begin every PHP code by <?php  and end the code by ?>

<?php

/*

Plugin Name: Comming up

Plugin URI: http://www.hackspc.com

Description: Up comming posts

Author: suraZ Kayastha

Version: 1.0

Author URI: http://youcanhack.blogspot.com

*/

These are actually PHP comments held between /* */ but wordpress fetches these section for details about the plugin.

Wordpress Plugins are all about PHP functions (the division of codes that work for specific part).

Lets see what we can do with the functions to create a plugin that will load a new widget.

/* Function that will deliver all the necessary code contents in the sidebar */

function commingup_widget() {}

/* Function that is called by wordpress when the plugin is activated. It registers new widget called Coming Up */

function init_commingup(){

register_sidebar_widget("commingup", "commingup_widget");

}

/* Tells WordPress to call init_commingup when plugin is loaded */

add_action("plugins_loaded", "init_commingup");

Confused? Let me clear you what those codes do. The first function, commingup_widget(),  here is what will be displayed on the sidebar. Whatever HTML/PHP code you put here will be displayed as a sidebar widget. It can be links, texts or any other dynamic contents.

The second function, init_commingup(), is called by WordPress if the plugin is activated. It calls a WordPress function that will register a new widget which will be called “Coming Up” which will call our new widget.

Add action just tells WordPress to call the second function when the plugin is loaded.

That is done, you’ve successfully created a plugin that will deliver a new blank widget.

You may be wondering how you can place dynamic contents in your newly created widget plugin.

This is so simple to do if you know little bit PHP and HTML coding.

Now let’s forget what we’ve done above.

And let me show you the idea to get things ready for your widget.

Consider the following loop that will show the posts that are marked as scheduled posts.

<?php query_posts('showposts=5&post_status=future'); ?>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<h2><?php the_title(); ?></h2>

<span><?php the_time('j F Y'); ?></span></p>

<?php endwhile;

else: ?><p>No future events scheduled.</p>

<?php endif; ?>

The above code is just a basic posts loop that we have in your index.php page. Only the difference is, it is modified to view only title and scheduled date. Post_status=future makes is so much special. Hence all the posts except scheduled one are filtered out.

You can directly put the above code in any part of index.php. But, we are creating a widget right?

So we’ll modify that code to fit as a widget.

Here is the modified part of it:

echo '<li><h2>Comming up</h2>';

echo '<ul>';

query_posts('showposts=10&post_status=future');

if ( have_posts() ) : while ( have_posts() ) : the_post();

echo '<li><h4>'; the_title(); echo '</h4>';

echo '<span>'; the_time('j F Y'); echo '</span></li>';

endwhile;

else: echo '<p>No future events scheduled.</p>';

endif;

echo '</ul></li>';

We’ll place the above code in function commingup_widget().

When we combine the description code and the functions we’ll get the following setup of code.

<?php

/*

Plugin Name: Comming up

Plugin URI: http://youcanhack.blogspot.com

Description: Up comming posts

Author: suraZ Kayastha

Version: 1.0

Author URI: http://youcanhack.blogspot.com

*/

function commingup_widget() {

echo '<li><h2>Comming up</h2>';

echo '<ul>';

query_posts('showposts=10&post_status=future');

if ( have_posts() ) : while ( have_posts() ) : the_post();

echo '<li><h4>'; the_title(); echo '</h4>';

echo '<span>'; the_time('j F Y'); echo '</span></li>';

endwhile;

else: echo '<li><p>No future events scheduled.</p>';

endif;

echo '</ul></li>';

}

function init_commingup(){

register_sidebar_widget("commingup", "commingup_widget");

}

add_action("plugins_loaded", "init_commingup");

?>

See that? All the codes are enclosed in <?php ?>. Now all we need to do is save it as PHP file. Name it anything you want, I named it commingup.php.

Upload it to wp-content/plugins/commingup.

Go to plugin control panel in wordpress and activate it.

Now navigate to widget control panel, Right sidebar > Appearance > Widgets.

There you go, you’ll see the widget that you’ve just created.

Click and drag it to the sidebar.

Now reload your Wordpress website. If you have any scheduled post then it will list it as an upcoming event.

If nothing is scheduled then it will print “No future events scheduled”.

If you have any confusion, then comment us. We’ll have full support for this widget in our blog.

Rather I suggested him certain idea to view PSD files without the need of Photoshop. And that is what I want to share with my visitors as well.

With IrfanView, a 1.3 MB image viewing freeware utility, you can open almost all the images without need of any high level software. Here is a list of image files that I can open.

IrfanView is a freeware utility, licensed under End User License Agreement (EULA).

It is not only a viewer; rather you can edit the pictures there. Basically it supports cropping, cut, paste, copy, drawing tools, eraser tools etc. IrfanView is plug-in enabled, that means they have plug-in to make it more accessible and useful.

Click here to download IrfanView

This is guest post from suraZ. His other interesting posts can be read on You Can Hack and Hacktutors blog.

Let’s summarize what they’ve done.

First they’ve created a function that retrives the first image of the post if the image is not found, then it will show default.jpg image from the defined location.

function catch_that_image() {

global $post, $posts;

$first_img = '';

ob_start();

ob_end_clean();

$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);

$first_img = $matches [1] [0];

if(empty($first_img)){ //Defines a default image

$first_img = "/images/default.jpg";

}

return $first_img;

}

Code exactly copied from wprecipes.com

The above code snippet is to be copied in functions.php file located at the themes root folder. If it doesn’t exists, then you can create one using notepad, and paste the above code enclosed in following format:

<?php

Wprecipes.com’s function code goes here

?>

Now to load the image anywhere in your main page or any other page just places the following code within the posts loop.

<?php echo catch_that_image() ?>

The above PHP function code must like somewhere near to <?php the_content(); ?> or <?php the_excerpt(); ?>

Consider it in the following example loop.

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<!-- Title of the post -->

<h2>

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">

<?php the_title(); ?>

</a>

</h2>

<!-- date and author of the post -->

<small>

<?php the_time('F jS, Y') ?> by <?php the_author() ?>

</small>

<p>

<!-- Thumbnail of the first image -->

<img src="<?php echo catch_that_image() ?>" />

<!-- Summary content of the post -->

<?php the_content(); ?>

</p>

<?php endwhile; ?>

<?php endif; ?>

You’ll get following type of screen in your post loop.

The upper post contains the first image of the post. The lower content is not showing any images rather than a alternate tag. It is because we don’t have any image in the second post, by default from functions.php, functions will be redirected to no image and browser will try to load default image. If browser is unable to find /images/default.jpg, which we have specified in functions.php it will show no image but alternative title, you must upload default.jpg in the specific location to get the default image.

But using default image might not be dynamic and useful if most of your post doesn’t contain any images. Then we’ll have to seek extra tweaks to show nothing in place of default image.

Let me show you how can you accomplish this using extra function.

First, we’ll create a function that will scan for presence of any image in the specific post, then we’ll define what it must do if image is there and what it must do if image is not there. It can be accomplished by using conditional tags.

Here is the function to scan image, add this in functions.php just above, ?> (i.e. exactly above the PHP code end tag)

function image_scan( $args = array() ) {

if ( !$post_id )

global $post;

preg_match_all( '|<img.*?src=[\'"](.*?)[\'"].*?>|i', $post->post_content, $matches );

if ( isset( $matches ) ) $image = $matches[1][0];

if ( $matches[1][0] )

return array( 'image' => $image );

else

return false;

}


Now we’ll use PHP conditional tag in index.php or any page where we want this to take effect on.

<?php  if (image_scan('TRUE')) {  ?> Show image <?php } ?>

The final code will be like this after applying the the image_scan condition.

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<!-- Title of the post -->

<h2>

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">

<?php the_title(); ?>

</a>

</h2>

<!-- date and author of the post -->

<small>

<?php the_time('F jS, Y') ?> by <?php the_author() ?>

</small>

<p>

<!-- Thumbnail of the first image -->

<?php  if (image_by_scan('TRUE')) { ?>

<img src="<?php echo catch_that_image() ?>" />

<?php } ?>

<!-- Summary content of the post -->

<?php the_content(); ?>

</p>

<?php endwhile; ?>

<?php endif; ?>


Now you’ll have only thumbnails of first images if it exists, otherwise it shows no image.

Hope this tutorial was helpful.

Backup your database

First you’ll need to backup your database from phpmyadmin. Go to your phpmyadmin from control panel. Then at the left sidebar, select the database your joomla is based on.

After you select the database, you’ll get list of tables.

At the right column, select on export tab.

In next page, under View dump (schema) of database, Export, click on select all.

Below this, you’ll have large options of formats available to export in. Choose SQL.

Under Save as File, give the filename and choose the compression method if you have larger size of database.

Then at the most right corner, click on GO button.

Then you’ll have a text format of the database.

Select all and copy it in Notepad. Save it as “database.txt” with Unicode formatting.

Now you have successfully backed up your data. Next you’ll be copying the core contents of the joomla site.

Copying the files to another host.

This is nothing harder; it is like just copying and pasting. Copy the contents from the source host and paste it to another host by using any FTP client favorable to you. You can also use windows inbuilt ftp client.

Since you are using joomla and using different host than previous one, delete the configuration.php file from the root of the webhost. Get the installation folder of the joomla version you were using and upload it to your new host again, as you might have deleted it from your previous host for security reasons.

Now we have the files ready.

Preparing for transfer.

Next, you’ll again login to phpmyadmin control panel and manually create a new database. To create a new database, in your phpmyadmin main page, type the database name exactly same that you had before.

Click on create button.

Installing again

To fix the host configuration, you’ll need to re-install joomla. Reinstalling joomla will create completely new website and you haven’t created any tables yet in your new database.

In your web browser browse to the main page and install it as usually with no sample data installed. Even though you install sample data, it doesn’t matter as you will be droping all the tables later.

After you the installation is complete, either rename or replace or remove installation folder. You’ll have new configuration.php in your root folder where joomla is installed.

Deleting the database

We installed joomla again only for the configuration.php. Now we won’t need the new tables created in this database. Therefore we’ll be removing it.

To remove all the tables, choose the database as before. In the right column at the end of the table list, click on Check All.

Now at in with selected dropdown list, select drop.

In next confirmation window, click on Yes button.

There you go, you’ve successfully cleared all the contents in your database. At the moment, your website won’t work, so better not browsing it.

Recovering your previous database

Again choose the database you’ve just emptied,  at the right column choose import tab.

In next page, click on choose file and upload the backed up database. Before uploading make sure you’ve chosen the right format. We’ve saved database.txt in utf-8 format. Hence we must select utf-8 format in the dropdown list.

Leave rest of the things as default and click on Go button.

You’ll be notified if the database has been successfully uploaded.

Now you’ve successfully completed transferring your blog. You’ll see everything similar as before.

Note:  You might have problem in administration page login if you have typed different username and password. The Username and Password that you used at the time of installation gets deleted. As you upload the backed up database, your previous administer username and password will be recovered instead. Therefore try logging in username and password as you had in your previous host.

This come the end of the tutorial. Hope you enjoyed it. If you have any questions then comment us.

CSS is the versatile method to design website, while HTML as the platform. Today, for interactive websites, mostly flash based movie files are used. However Flash is not based on any HTML program. Plus, it needs additional plug-in and applets in browser to view the flash based website. This is the main backward feature of flash based websites.

However with the release of new HTML 5 and CSS, it is now possible to achieve interactive websites more versatile than Flash based interactive websites.

Today, in this post, we’ll discuss about few methods that we can apply in HTML and CSS only to achieve highly dynamic and interactive web templates.

Using pseudo classes

CSS pseudo-classes are used to add special effects to some selectors. For example, some popular and widely used pseudo classes are:

:link, :visited, :hover, :active.

Following example demonstrates the use of pseudo class in <a > tags.

a:link {color:#FF0000;}      /* unvisited link */
a:visited {color:#00FF00;}  /* visited link */
a:hover {color:#FF00FF;}  /* mouse over link */
a:active {color:#0000FF;}  /* selected link */

It can also be applied to lists and divisions to add more hover effects to the web page.

For example, the following images shows how it can be applied to divisions to add content highlight effect.

We’ used hover to one of the class for division.

Here is the basic CSS code:

<style>

.home {

Background:#333;

}

.home:hover {

background:#0C6;

}

</style>

And for the HTML part:

<div>

Every contents located here will have mouse highlighting effect.

</div>


Method to add image link hover effect

Bascially, we apply background image to a:link and another background image to a:hover to have background image hover effect in CSS. It is ok with all of the browsers as most of them supports it.

But incase you are using large size image then you’ll have a problem here. What exactly the above method does is that, whenever the link is in normal state (i.e. mouse is not over the link) the browser will in default load the background image specified in a:link CSS class, but when mouse is hovered over the link, it will load background image from a:hover class. If the image is larger in size then it will take time to load.

Let us discuss alternative method which will load both of the images at the of page load.

Look at the HTML code below:

< a href="link.html">

<img alt="image" src="images/image.png" class="nohover" />

<img alt="imagehover" src="images/image.png" class="hover" />

</a>

We have two images inside <a> tag each of the image have specific class defined.

We can hide one of the image when hovering with the help of CSS.


img.nohover {

border:0

}

img.hover {

border:0;

display:none

}

a:hover img.hover {

display:inline

}

a:hover img.nohover {

display:none

}

In above four different CSS functions, at first when no mouse is hovered over the link image, the image defined with class “nohover” will take in action, resulting only one image to be viewed. In other words, one image is set to hidden while other one is set to visible. We do this by the help of display:none;

Now when a link image is hovered, we’ll apply display:none; to the image that must be hidden when hovered. And for the one that must be visible, we’ll apply display:inline;

Copy and try the above codes. Play with it, you’ll learn more when you research it yourself.

This works in all the version of browsers, so you won’t have cross browser compatibility problem.

The rise of CSS3 have made more thing possible, the above tutorial is classified under CSS 2.1 version.

In this way you can utilize the pseudo class hover to make your web page much more user friendly and interactive.

Also we’ve another technique, border-radius, which is supported from CSS3. But CSS3 is not supported in enemy of web developers, i.e. Internet Explorer. However CSS3 is partially supported in other popular browsers like Chrome, Firefox, Safari, etc.

The main problem here became the internet explorer. Even Internet Explorer 8 doesn’t support CSS3 rounded corners. However, it is expected in Internet Explorer 9.

Now, instead of trying images and CSS3, we’ll focus on CSS2 as every of the browsers supports it.

Before creating rounded corners we must technically have pixel to pixel knowledge about rounded corners.

Rounded corners are created from pixels. Imagine a bunch of few lines combining to form a rounded corner. To get clearer, refer to following example:

The above illustration is the illustrated microscopic view of rounded corner in raster image.

Again when the lines come closer together, then it looks like this:

Finally when all of the line combines then it gives a pixilated image of rounded corner.

In normal view, a rounded corner will look like the image below:

We are going to work on the same principle.

Assume that you want rounded corner of about 6 pixel, then you’ll need 7 different lines of 1 pixel height with several width.

As you can see the first line illustrated image above, the height is made constant with few gaps and the width keeps increasing by 1px or few more pixels.

For your easy, again refer to following illustration.

The first line is 93px long, and second line is 2px more than first one. After that the width of the line is kept increasing by 1px till it gives 99px.

Note:  For larger radius, you’ll need larger number of lines.

Now we’ll do the CSS trick here which is applicable as CSS2.

We’ll create 6 spans with different classes. We’ll name the class as class1, class2, class3, class 4, class5, class6. And we’ll put each line in each span class. But we are not going to place image, we’ll be instead using background color for each span.

You might question right here, why 6 classes only when we have 7 lines in above image. Well, this is because, the last two lines have similar width and we can set the height to make it as two lines.

Again to define the width of each span, we’ll use margin, where the actual width remains same but the background color will skip the marginal areas. And we’ll again set the height of each span.

OK, now let me show you how this can be accomplished in CSS script.

We will first set default values for all the classes that lies in span.

.class1, .class2, .class3, .class4, .class5, .class6 {

display:block;

overflow:hidden;

}

This will make each span as a block instead of inline content and set the overflow hidden.

We’ll now set the width of each line. But we are not using width CSS code as we actually will have dynamic div wrapping this. So we are doing only pixels work here not a line. Therefore, we’ll use margin.

Here is a code for each class,

.class1 {

Height:1px

Background:#ddd;

Margin:0 6px; /* this will make the first line of the rounded corner 6px smaller than normal maximum line width */

}

.class2 {

Height:1px

Background:#ddd;

Margin:0 4px; /* this will make the second line of the rounded corner 4px smaller than normal maximum line width */

}

.class3 {

Height:1px

Background:#ddd;

Margin:0 3px; /* this will make the third line of the rounded corner 6px smaller than normal maximum line width */

}

.class4 {

Height:1px

Background:#ddd;

Margin:0 2px; /* this will make the fourth line of the rounded corner 2px smaller than normal maximum line width */

}

.class5 {

Height:1px

Background:#ddd;

Margin:0 1px; /* this will make the fifth line of the rounded corner 2px smaller than normal maximum line width */

}

.class6 {

Height:2px /* this will double the line */

Background:#ddd;

Margin:0 0; /* this will make the last line of the rounded exactly the maximum width of the wrapper */

}


Now we’ll be coding for XHTML.

<div class=”outerwrapper”>

<span></span><span class="class2"></span><span></span><span class="class4"></span><span></span><span class="class6"></span>

<div class="content">

Rounded Corner here!!

</div>

<span></span><span class="class5"></span><span></span><span class="class3"></span><span></span><span class="class1"></span>

</div>

The bottom rounded corner must have reversed order of span class. Like we have class1 then class 2 then class 3 then class 4 up to class 6 for the top rounded corner. We’ll need exactly reverse, class6 then class5 … for the bottom rounded corner.

Finalized style sheet:

<style>

.outerwrapper {

Width:960px;  /* whatever width you set here, the rounded corner will automatically adjust itself to it.

}

.class1, .class2, .class3, .class4, .class5, .class6 {

display:block;

overflow:hidden;

}

.class1 {

Height:1px

Background:#ddd;

Margin:0 6px; /* this will make the first line of the rounded corner 6px smaller than normal maximum line width */

}

.class2 {

Height:1px

Background:#ddd;

Margin:0 4px; /* this will make the second line of the rounded corner 4px smaller than normal maximum line width */

}

.class3 {

Height:1px

Background:#ddd;

Margin:0 3px; /* this will make the third line of the rounded corner 6px smaller than normal maximum line width */

}

.class4 {

Height:1px

Background:#ddd;

Margin:0 2px; /* this will make the fourth line of the rounded corner 2px smaller than normal maximum line width */

}

.class5 {

Height:1px

Background:#ddd;

Margin:0 1px; /* this will make the fifth line of the rounded corner 2px smaller than normal maximum line width */

}

.class6 {

Height:2px /* this will double the line */

Background:#ddd;

Margin:0 0; /* this will make the last line of the rounded exactly the maximum width of the wrapper */

}

.content {

Padding:5px;

Background:#ddd;

}

</style>

Apply the above code and see the result in every browser. It is supported in every browser, as we have used nothing complicated here.

Hope this was helpful.