• Design HOME
• Design Page 2
• Design Page 3
• Design Page 4 Rounded Corners
• Design Page 5
         Blend
• Design Page 6
     Columns

• Design Page 7
• Design Page 8
• File Sync Info   Pg 9
• ToolsPage   Pg 10
• TipsPage   Pg 11
• Contact

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

From Wikipedia, the free encyclopedia (Redirected from .htc)

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

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);

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:

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.