Round Corner | Curved Corner DIV Cross Browser

These days I am trying to edit the site design to have a better look and provide easy access for users by a simple and good navigation menu. But there is a no of trade-offs like pagelook Vs lightweight, javasript Vs SEO etc.


We always like round corner in things whether it is furniture or car. But for web pages round corner is not so easy. There are a number of methods to include round corner in pages paragraphs images. But the easiest ways are not supported by all browsers.

 

CSS3

In CSS3 there are some new special attributes included for the easy design of smooth corner boarder lines. But these code tags are different for different browsers . Actuallly it does not depend not on the browser but the layout engine which works behind it. Here is a list of layout engines.

Trident         Internet Explorer

Gecko            Firefox, Netscape

Web-kit        Google Chrome and Safari

Presto            Opera

These layout engines define their own notations, so there is a problem in creating cross browser designs.

#example1 {
border-radius: 15px;
}

However, for the moment, you’ll also need to use the -moz- prefix to support Firefox (see the browser support section of this article for further details):

#example1 {
-moz-border-radius: 15px;
border-radius: 15px;
}

 

 

The Syntax:

border-*-*-radius: <length> | <%> ] [ <length> | <%> ]?

Examples:

border-top-left-radius: 10px 5px;
border-bottom-right-radius: 10% 5%;
border-top-right-radius: 10px;

 

The Syntax:

<length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

Examples:

border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
border-radius: 5px;
border-radius: 5px 10px / 10px;

 

The following diagram gives a few examples of how corners might appear given differing radii:


If either value is zero, the corner will be square, not round.

For older versions of Mozilla

W3C Specification

Mozilla Implementation

border-radius

-moz-border-radius

border-top-left-radius

-moz-border-radius-topleft

border-top-right-radius

-moz-border-radius-topright

border-bottom-right-radius

-moz-border-radius-bottomright

border-bottom-left-radius

-moz-border-radius-bottomleft

But the Internet Explorer supports these properties only after IE9.

Cross Browser Examples

Here’s a few basic examples that should work in current versions of Firefox, Safari/Chrome, Opera and even IE9:


 

#Example_A {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
}

#Example_B {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
}

#Example_C {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
}

#Example_D {
height: 5em;
width: 12em;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}

#Example_E {
height: 65px;
width:160px;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}

#Example_F {
height: 70px;
width: 70px;
-moz-border-radius: 35px;
border-radius: 35px;
}

Reference:

https://developer.mozilla.org/en/CSS/border-radius

http://www.css3.info/preview/rounded-border/

http://www.w3.org/TR/css3-background/

http://www.w3schools.com/css3/css3_borders.asp

http://www.w3schools.com/css3/css3_pr_border-radius.asp

 

Webbased code generator

Spoofy Corner

No images, Supports Mozilla and IE version before 9 also

 

Cornershop

Image based Corners

Another Image Generator

Generates a PNG format rounded corners for you on the fly. Simply copy the scripts below into a browser and hit enter.

http://groups-beta.google.com/groups/roundedcorners? c=999999&bc=white&w=4&h=4&a=tr

Tweak the following parameters to get the rounded corners of your choice.

Parameters:

c

the color, as either a name or a CSS-style color spec (RGB or RRGGBB) sans #. Color names that seem to work: black white gray red green blue yellow teal olive purple. Can you find more?

bc

the background color, same acceptable input as c

h

height in pixels

w

width in pixels

a

which corner to generate; tl is top left, tr is top right, bl is bottom left, br is bottom

 

Reference: http://www.css3.info/preview/rounded-border/

 

Curvycorner

A java library for round corner

Another code

Jquery based round corner http://jquery.malsup.com/corner/

http://www.alloyfish.com/editorial/alloyfish-developments/true-cross-browser-rounded-corners.fish

 

 

Embedded C

    Few days ago my guide asked a question what is difference between embedded C and standard C.

Difference between Embedded C and standard C

Standard C compilers output a binary file that can be run over a Operating system (windows/Linux). The compilers used for embedded C are cross platform compilers. The main difference is embedded C targets embedded system and standard C targets are Personal computer or servers. Embedded C gives more power to the user to access the memory at bit level. In embedded C the programmer has to write most of the codes himself there is no standard library. Because in embedded systems there is no common I/O is defined like our PC’s where the common I/O’s are the keyboard and the monitor.

  • Difference of the targets either embedded system or a normal PC
  • No standard library
  • No real-time system compatibility
  • Usually there is an infinite loop (not necessary in purely interrupt driven system) which is restricted in standard C
  • Programmers have to consider memory size, stack size as embedded systems have less memory
  • Bit level accessibility of memory
  • Extra data pointers