news

1st January 2006

The company announces the launch of it's new website.

1st January 2006

The company announces the launch of it's new website.

NOTES: This area can be used for news or any other info.

other info

This space can be used for additional information such as a contact phone number, address or maybe even a graphic.

Design Continuation... page 4

Rounded corners.?.?

When you have blocks of information that you want to place in a square envelope, or container, to set it off, wouldn't it be nice to have the corners rounded without using graphics?? The graphics method kinda forces you into a fixed width syndrome. There is a way... with CSS3.

Now then, we have collected info from all over the Web -AND- have tried to give credit where credit is due. IF we have missed any of you, please e-mail us and we will correct the situation.

htc - HTML Components

HTML Components (HTCs) are a nonstandard mechanism to implement components in script as Dynamic HTML (DHTML) "behaviors"[1] in the Microsoft Internet Explorer web browser. Such files typically use an .htc extension.

An HTC is typically an HTML file (with JScript / VBScript) and a set of elements that define the component. This helps to organize behavior encapsulated script modules that can be attached to parts of a Webpage DOM.

In our searches we found a fix for IE. Please view the reference below. Inside the unzipped directory, you will find a file named PIE.htc. This is the behavior file for IE, and is what does all the magic. Upload this file to the server where you're going to serve pages using CSS3. It doesn't matter where exactly, as long as you know where it is... and properly reference it.
PIE currently has full or partial support for:

  • border-radius
  • box-shadow
  • border-image
  • multiple background images
  • linear-gradient background images
Refer: PIE (Progressive Internet Explorer)
The following info was initially borrowed swiped from: Jon Raasch Also see his: Graceful Degradation With CSS3 and the-art-of-web
However, the Rounded Corner Tool came from: CSS round
Now then, I have added to their words and this is a combo from both. -But- I do want to give them both the credit that they deserve and if you want more info, jump over to their pages.
Refer also: SmileyCat

The easy part - Firefox, Safari & Chrome

It's best to avoid hacks if at all possible, and luckily Firefox, Safari and Chrome all support rounded corners through native CSS methods. Let's apply a border-radius of 20 pixels to everything with the class 'rounded-corners':

.rounded-corners {
	     -moz-border-radius: 20px;
	     -webkit-border-radius: 20px;
	     -khtml-border-radius: 20px;
	      border-radius: 20px;
	}

Coped directly from: CSS3PIE
Step 4: Apply PIE

In that same CSS rule, add the following style line:

behavior: url(path/to/PIE.htc);
Of course you will need to adjust the path to match where you uploaded PIE.htc in step 2. Note: this path is relative to the HTML file being viewed, not the CSS file it is called from.

The first thing you might notice is that the border-radius was defined four times over. This is because current (at the time this was written) browser implementations aren't completely refined according to W3C's recommendations. Since each of the browsers still has its own unique idiosyncrasies, they apply prefixes such as -moz and -webkit and -khtml.

In the example, -moz-border-radius is for Firefox, -webkit-border-radius is for Chrome/Safari and -khtml-border-radius is for older Konquerer browsers. Finally, the plain, old border-radius is future-proofing for whenever browsers properly support this attribute.

Applying border-radius here will round all the corners of the element, but you can also round certain corners and not others, or even use elliptical as opposed to perfectly round corners. Read this CSS-Tricks article for more info.

As mentioed above, you can specify all four corners, -and- they can be different, as I have below:

 20
30 






 40
50  

     -moz-border-radius: 20px 30px 50px 40px;

They are from left to right: [top-left] [top-right] [bottom-right] [bottom-left]

The above specifies the radius -and- the height because it is a single number. However, you can get fancier and specify the vertical radii. This is an optional second set of values preceded by a '/'.

-moz-border-radius: [horizontal radius] / [vertical radius];

-moz-border-radius: 10px / 40px;

-moz-border-radius: 10px 20px 30px 40px / 15px 30px 45px 60px;

Which can produce some wild corners.... have fun.

Refer: CSS3 Info and CSS-Tricks

CSS3 (Opera browser) Mozilla equivalent WebKit equivalent
border-top-right-radius -moz-border-radius-topright -webkit-border-top-right-radius
border-bottom-right-radius -moz-border-radius-bottomright -webkit-border-bottom-right-radius
border-bottom-left-radius -moz-border-radius-bottomleft -webkit-border-bottom-left-radius
border-top-left-radius -moz-border-radius-topleft -webkit-border-top-left-radius
border-radius -moz-border-radius -webkit-border-radius