Saturday, September 4, 2010

Achieving rounded corners in xHTML & CSS

Posted on: Friday, April 23rd, 2010
Category: Blog, Featured

rounded_cornersOver the past couple of years I’ve been implementing rounded corner techniques in my CSS to give my websites that extra pizazz.

There’s plenty of ways to achieve the rounded corner technique. Some developers like to apply multiple nested div’s to achieve extra flexability within their layouts, other just want to keep it simple. If you like the flexibility of being able to change width and heights of an element without having to worry about your rounded corners looking out of place then this is the tutorial for you.

What you’ll need:

  • Fireworks CS4
  • Text Editor (e.g. notepad, dreamweaver, etc.)
  • Browser

What you’ll learn:

  • Slicing graphics with Fireworks cs4
  • Importing/exporting graphics with Fireworks cs4
  • Creating xHTML & CSS based <div> with rounded corners.

Part #1: Creating the graphic

Step #1

Fire up Firworks and create a new file. Go to File> New (ctrl+N). In the document settings give the art board a width of 200px and height of 100px.

Step #2

With your mouse click on the “Rounded Rectangle” button and create a box with equal an equal width and height of the art board. Adjust the border radius to 5px.

step1

Step #3

Now it’s time to create the four individual rounded corners. Select the the “Slice Tool (ctrl + k)” and create four slices (one for each corner) that are 10px X 10px.

step2

Step #4

Now were going to export our slices. Go to File>Export (ctrl+shift+R) and export the four slices we just made to a new folder named “RoundCorners”.

step3

Step #4

Create a new file by to File> New (ctrl+N). In the document settings give the art board a width of 46px, a height of 10px and canvas color of white (HEX: #FFFFFF ).

Step #5

Go to File> Import (ctrl+R) and begin importing each slice starting with top left corner, then top right corner, followed by the bottom left corner and finally the bottom right corner.

step4

Once all four images are on the canvas, space them horizontally across with a 2px spacing in between each graphic. Go to file> save as> and name it “rc_corners“. When your done your image should look like this:

rc-corners

Part 2: Creating the code

Step #6

Open up your text editor, create a new file. Save the file as “index.html” to the folder “RoundCorners”.

Step#7

Copy and paste the following xHTML code into the <body> of your “index.html” file and save your changes:

<div class="rc-wrap">
  <div class="tl"></div>
  <div class="tr"></div>
  <h1>ROUNDED CORNERS</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fringilla porttitor urna non dapibus. Suspendisse vitae ligula vitae erat dictum laoreet. Aenean eget euismod metus. </p>
  <div class="bl"></div>
  <div class="br"></div>
</div>

Step#8

Copy and paste the following CSS code into the <head> your “index.html” file and save your changes:

<style type="text/css">
.rc-wrap{position:relative;background:#ff0000;color:#fff;width:200px;padding:10px;}
.rc-wrap h1{font-size:95%;margin:0;}
.rc-wrap p{margin: 10px 0;}
.tl, .tr, .bl, .br{position:absolute;height:10px;width:10px;}
.tl{top:0;left:0;background: url(rc-corners.png) 0 0 no-repeat;}
.tr{top:0;right:0;background: url(rc-corners.png) -12px 0 no-repeat;}
.bl{bottom:0;left:0;background: url(rc-corners.png) -25px 0 no-repeat;}
.br{bottom:0;right:0;background: url(rc-corners.png) -38px 0 no-repeat;}
</style>

Step #9

Open up your browser and browse to the folder “RoundCorners” and open the file “index.html”. If the steps were executed correctly, then a red box with rounded corners will display in your browser window.

step7

Download the files: Rounded Corners Tutorial (0)

Tags: , ,

Subribe to comments: Feed

Leave a Reply

Back2Top