First, we have to create four images which will create the rounded effect. The images should have a transparent background, but have a rounded edge effect with the color of your site background. Here is an example of the rounded images we used with a black background instead of a transparent one.

With the images now created, we can start looking at the CSS code to create the effect. Since we only want the effect on elements that we choose to apply it to, we will need to create a class for the effect. Lets call this class round. You can name the class anything you would like, but it is best to try to keep it simple but descriptive. We will need to use the images that we created, and we are going to use them as background images. This means we are at least going to use the background attribute in CSS. In order to use the images, we are going to also have to tell the CSS code where the images are located, to do this we will use url(). So far, our CSS should look like the following.

.round{
background: url(images/top_right.gif);
}

So far the CSS is simple, but we already have ran into an issue. If we were to use this CSS, we will have the image top_right.gif repeat, to create the rounded corners we do not want this to happen. We have to add additional values to the background attribute to stop the image from repeating. To do this, just add no-repeat after the url() but before the semi colon. Another issue that we have ran into is that the background starts in the top left corner, but this is the image for the top right corner. To solve this we need to add “top right” after the no-repeat value. With the added values the CSS code should look like the following now.

.round{
background: url(images/top_right.gif) no-repeat top right;
}

If we were to apply this style sheet to an element at this point it would just have one rounded corner. In order to get the top left corner rounded, we have to add a few things to the code, first we need to add the pseudo-element :before. (Note that Internet Explorer does not support the :before and :after pseudo-elements, and the effect will not appear for Internet Explorer users.) This will apply the style before any element that is in the round element. Another reason that the pseudo-element is needed, is because we have to use the content attribute. The content attribute can only be used with the pseudo-elements :before and :after. This attribute allows us to “float” the image for the rounded top left corner into the correct position. Again to do this we are going to use the url() value. Here is what the style sheet now looks like with all of this added.

.round:before{
background: url(images/top_right.gif) no-repeat top right;
content: url(images/top_left.gif)
}

Here again we run into another issue, this code will only make a semi circle instead of a round effect that we want to overcome this issue, we will only need to add the display attribute and set the value to block. Here is the final style to round both top corners.

.round:before{
background: url(‘images/top_right.gif’) no-repeat top right;
display: block;
content: url(images/top_left.gif)
}

Now, if we put any element into the class round, the top two corners will have a rounded effect. To have the bottom corners rounded we only need to change a few things in the code itself. We have to change the images that we are using, and change the pseudo-element from :before to :after. Below is what the style sheet looks like to give the effect to the bottom corners.

.round:after{
background: url(‘images/bottom_right.gif’) no-repeat top right;
display: block;
content: url(images/bottom_left.gif)
}

Now, to style the element that we are putting in the round class. If we were using this in an actual site then we would create an id. We would then give the element the id, and class. Remember that ids are used for one element, where classes are used for multiple elements. If you were wanting all of the element with rounded corners to have the same look, then use a class. In this example we are going to use both. So lets start with the round class. Lets make this class 350 pixels wide with a background that is a shade of grey. Here is the CSS code for that.

.round{
background: #DCDCDC;
width: 350px;
}

For the id, we will name it corners, and lets make it 150 pixels wide, with a dark green background. We also want the text to be bold and white.

#corners{
background: #2F4F4F;
width: 150;
color: #FFFFFF;
font-weight: bold;
}

That is it for the CSS to create this effect. Lets move on an look at the HTML part of the code.

Most of the HTML to create the rounded corner effect is very basic, we are just going to apply a class to the element. As we stated before, we can also apply an id to the element to create an even more custom feel for each element. Below is an example of both ways.

<div class=”round”>This is an element in the round class, since we have applied a background, and width attributes to the class, this element will inherit those values.</div>
<p class=”round” id=”corner”>This element will have the rounded corner effect, but will also have a different background color, width, and text color since it also has an id value</p>

Since our images only have the color if the background of the body to create the rounded effect, both elements will have a rounded effect, but with different background colors.

Here is the all of the CSS:

.round:before{
background: url(’images/top_right.gif’) no-repeat top right;
display: block;
content: url(images/top_left.gif)
}

.round:after{
background: url(’images/bottom_right.gif’) no-repeat top right;
display: block;
content: url(images/bottom_left.gif)
}

.round{
background: #DCDCDC;
width: 350px;
}

#corners{
background: #2F4F4F;
width: 150;
color: #FFFFFF;
font-weight: bold;
}

You can see an example of this code here

Rounded corners is one of the most popular and frequently requested CSS techniques even the father of internet Google also launch the rounded corners style markup with her Google Adsense and let users to custom their ads recently. Actually, there are a lot of methods and techniques to create rounded corners with Cascading Stylesheets. Some are quite simple just need pure CSS, and a part of them need 2 to 4 background corner images and Javascript. So i select some quality and usable rounded corners with CSS techniques for you to have the best choices.

Note: Here are some additional related articles on DevWebPro you should also take a look at:

- Advantages of Using Corners Without Images

- Smooth Your Design and Round Those Corners!

- Rounded Corners Using CSS

Techniques

ThrashBox – create rounded-corner boxes with visual flare and the absolute minimal amount of semantically correct markup.

Even More Rounded Corners With CSS – nice technique with fluid rounded corner dialogs and support for borders, alpha transparency throughout, gradients and patterns.

DomCorners – a very simple technique for getting rounded corners.

virtuelvis.com Rounded corners in CSS – allow you to retrofit this to existing designs without altering any markup.

Transparent custom corners and borders version 2 – a technique for creating custom corners and borders with optional alpha transparency.

CSS Teaser Box with rounded corners – by Roger Johansson, the same author of Transparent custom corners and borders version 2.

News List – was designed to display links to recent news.

CSS Liquid Round Corners – a re-usable rounded box, note that it needs total 6 images for wrap the corners.

Anti-aliased Nifty Corners – based on Nifty Corners and modified by Steven Wittens.

Simple Box by tedd – another simple rounded corners.

CSS and round corners making accessible menu tabs – decent rounded corners style menu tabs technique.

CSS and round corners borders with curves – make a rounded corners borders with curves.

Airtight Corners – produce a box with rounded corners using only one image, and off-setting that image for each corner.

Mountaintop Corners – easier way for creating decent rounded corners.

Editsite Rounded Corners – need a javascript to create the corners.

Create a rounded block or design with CSS and XHTML – easily create a rounded block.

Resizable box with freely stylable corners and surface – re sizable rounded corners box.

Smart Round Corners – a practical solution to uses small images for markup the corners.

Lean and Clean CSS boxes – need 2 images to wrap the header and box.

Broader Border Corners – a quick and easy recipe for turning those single-pixel borders.

Snazzy Borders – based on Nifty Corners By Alessandro Fulciniti

Rounded corners in CSS by Adam Kalsey – requires 4 corners images.

curvyCorners – a free JavaScript program that will create on-the-fly rounded corners for any HTML DIV element, that look as good as any graphically created corners.

Nifty Corners – a solution based on CSS and Javascript to get rounded corners.

quinncrowley.com – based upon a combination of pixy and Kalsey

Rounded Corners Generators

Online rounded corners generators, Rocks!

http://www.roundedcornr.com/ – the herald of rounded corners generator tool.

http://www.spiffycorners.com/ – simple way to generate the CSS and HTML you need to create anti-aliased corners without using images or Javascript.

http://tools.sitepoint.com/spanky/ – an experimental technique for using only CSS to produce ’round-cornered content boxes’ with semantically pure markup.

http://spiffybox.com/ – another project by the owner of Spiffy Corners.

Tutorials

There are quite a lot of CSS rounded corners tutorials, it is impossible to post all articles here. So selection is necessary, here is some you may feel interesting.

Rounded Corners with CSS and JavaScript by Simon Willison
Rounded corners are one of the most frequently requested CSS techniques. As with many things in CSS, there are various ways in which this problem can be approached. In this article, I’ll look at the pros and cons of some common techniques and introduce a new technique that utilises both CSS and JavaScript.

Rounded Corners without Images: A Nifty Corners Inspiration
What is it all about? It’s a method of creating rounded corners of an element without using images, just with a piece of JavaScript and few drops of CSS. I like rounded corners, but the necessity to create for every diameter and every combination of foreground and background color 4 images for me as the designer and to download them for the user makes me use the square ones in most cases.

CSS Design: Creating Custom Corners & Borders by Søren Madsen
We’ve all heard the rap:
“Sites designed with CSS tend to be boxy and hard-edged. Where are the rounded corners?”
Answer: the rounded corners are right here. In this article, we’ll show how customized borders and corners can be applied to fully fluid and flexible layouts with dynamic content, using sound and semantically logical markup.

Rounded Corner Boxes the CSS3 Way by Andy Budd
If you’ve been doing CSS for a while you’ll know that there are approximately 3,762 ways to create a rounded corner box. The simplest techniques rely on the addition of extra mark-up directly to your page, while the more complicated ones add the mark-up though DOM manipulation.

*Updates

CSS Rounded Corners ‘Roundup’ – one more great list by Smiley Cat.

This particular open source kit is backed by Microsoft as this kit is a joint achievement between Microsoft and the growing ASP.NET AJAX community. The kit has various functions that allow speedy development of various applications. If you go to the main site at http://www.asp.net/ajax/AjaxControlToolkit/Samples/, you will notice a foray of user created samples.

Let’s look at some outstanding points on the toolkit:

1. Simple and easy to use following the Getting Started quick tutorials.

2. Free library that offers Ajax enabled controls.

3. Developers can add JavaScript if required.

4. The kit is compatible with all the latest browser versions for Firefox and Internet Explorer.

Today’s web sites are focused on presenting an interactive web experience. The kit has more than 30 very unique controls to allow developers to create interactive applications. Once you get used to the main controls, it’s a good idea to keep checking the page above for any new controls that have been added. One of the new controls added is an HTML editor for direct edits to the code markup. It’s rather like a visual editor so it can be suitable for most levels of experience.

Us e the tutorials wisely, best to start with the Getting Started section if you are new to .NET and this kit. The kit is backed by a large community like most successful open source projects and they are willing to answer questions on the use of the product.

There are advantages to using a kit that is built on the ASP language. Developers can be immediately familiar with the functions especially if they have used Net AJAX or the jQuery library. Developers have the advantage of expanding on the open source kit by adding new classes if desired.

Developers whom prefer jQuery’s style can use the jQuery UI if desired and combine with the kit where appropriate. Though, it’s entirely possible to just use the toolkit as it offers a high quality control set and ease of use. The developers working on the open source controls are fixing bugs when they crop up. The new releases always have a set of updates referencing new fixes. This is the essence of an open source community that brings together likeminded programmers.

If you are using AJAX and ASP.NET each day of your project cycle, you should consider this enterprising toolkit to be part of your programming software library.

Source code Viewer and Editor

1. CSSViewer – simple and useful extension for view any part of CSS property at current pages. Recommended!

2. EditCSS – it is easy way to view or modifier any stylesheets in the Sidebar just right click or “Shift+Ctrl+8″.

3. Firebug – view, edit, and monitor CSS, HTML and Javascript live at any web pages. There is a small green click added at the bottombar after installation.

4. View formatted source – similar with CSSViewer, displays formatted and color-coded source for each element.

5. CSSMate – online CSS editor extension, similar with EditCSS.

6. ViewSourceWith – let you view page source with external applications.

7. Font Finder – simply highlight a single element and right click to view all CSS style.

8. Live HTTP Headers – View HTTP headers of a page and while browsing.

9. Modify Headers – allows you to add, modify and filter http request headers.

10. Professor X – let’s you see inside a page’s head without viewing the source code.

Web page Validators

11. CSS validator – one click to valid a page using the W3C CSS validator.

12. Validaty – Provides you a button to validate a page using a validator like validator.w3.org.

13. Html Validator – adds HTML validation inside Firefox and Mozilla.

14. SourceEditor – view and edit source of HTML element.

15. Total Validator – provides true HTML validation (HTML 2.0 to XHTML 1.1) using the official DTDs, plus added attribute checking.

16. LinkChecker – Check the validity of links on any web page.

Miscellaneous

17. Web Developer – Adds a menu and a toolbar with various web developer tools.

18. Style Sheet Chooser II – allows you to choose author-provided alternate style sheets for a web site.

19. View Dependencies – lists all the files which were loaded to show the current page at a tab of “page info” window.

20. Accessibar – enabling easy manipulation of web page display and text-to-speech output.

21. Aardvark – used for cleaning up a page prior to printing it for making the page more readable and analyzing the structure of a page.

22. Copy as HTML Link – creates an HTML link to the current page using the selected text, copy and paste into other applications.

23. TableTools – sorts, filters or copies any HTML table.

24. CHM Reader – make firefox support Compiled HTML file reading.

25. PageDiff – a simple page compare application to helps web developers and designers to see HTML code differences between web pages.

26. Clipmarks – let you save any parts of current web pages. Nice and Recommended!

CSS Formatter and Optimizer

http://www.codebeautifier.com/

http://www.cleancss.com/

http://www.cssdrive.com/index.php/main/csscompressor/ – a online CSS compressor, powered by CSS Drive.

http://iceyboard.no-ip.org/projects/css_compressor – another CSS compressor.

http://www.cssoptimiser.com/

http://flumpcakes.co.uk/css/optimiser/

http://www.prettyprinter.de/

CSS Layout and Menu Generator

http://csscreator.com/?q=tools/layout – online CSS layout generator for you to create a fluid or fixed width floated column layout.

http://www.inknoise.com/experimental/layoutomatic.php – Layout-o-Matic automatically generates CSS layouts.

http://www.wannabegirl.org/firdamatic/ – an online tableless layout generator that allows you to create and customise layouts easily.

http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php – CSS source ordered variable Border 1-3 columned page maker.

http://www.qrone.org/cssdesigner.html – online CSS style generator.

http://www.scriptomizers.com/css/stylesheet_generator – a CSS stylesheet generator.

http://www.colly.com/scripts/rollover.html – CSS rollover generator.

http://www.webmaster-toolkit.com/css-menu-generator.shtml – CSS menu generator.

http://www.listulike.com/generator/ – create cross-browser list-based navigation bars.

Miscellaneous Tools

http://www.roundedcornr.com/ – the king of online rounded corners generators with gradient.

http://www.theboxoffice.be/ – lets you wrap/float/contour text around freeform images using CSS.

http://riddle.pl/emcalc/ – estimates Em size equivalent to px size.

http://www.css-ref.com/ – test your CSS code.

*Updates

http://services.immike.net/css-checker/ – find CSS selectors that aren’t used by any of your HTML files and may be redundant.

* Updates

http://www.cssfly.net/ – easy source code viewer and editing websites directly.

CSS Based Navigation Menus

Tabbed Navigation Using CSS

SimpleBits Mini-Tab Shapes – 4 different styles use a single, small gif for hovering and active tabs.

2 Level Menu – really beauty hover effect menu, unique and special. Recommended!

Exploding-boy CSS Tabs Menus – list of various style free tabs menu created by designer Christopher Ware.

CSS Based Navigation

CSS Menu with Slider – need two Javascripts for the moving slider. Simple and elegant.

Smaug Hover Menu

Drop Down Llama Menu – cool pink hover effect.

Inline Mini Tabs – if you like Simplebits Mini-Tabs, it is another choice.

Pure CSS horizontal Drop Down Menu – simple CSS dropdown sub-menus.

Hoverbox Menu – uses images replacement techniques.

Accessible Image-Tab Rollovers

Fancy Menu – the coolest movable hover menu, Recommended!

You can find more at here. There is no screen shot below to reduce the loading time. : )

• CSS Mini Tabs (the UN-tab, tab) – another 2 styles underline hover menus by Simplebits.
• Rollover CSS Image Menu – clean and elegant hover menu.
• Artists drop-down validating menu – CSS drop down menu with background images.
• Menu using image replacement
• Navigation Matrix Reloaded
• CSS Library Horizontal CSS Menus – a bulk of CSS menu by DynamicDrive.
• 13styles.com – focus on CSS menu design and also offers free menus for download.
• 14 Free Vertical CSS Menus – designed by exploding-boy, simple and various styles.
• ADxMenu – 4 basic and useful menus with different style.
• CSSMenus by Solardreamstudios – a 4 level deep list in both horizontal and vertical layout modes.
• CSS only drop-down menu – 5 styles drop down menus with underlines.
• e-Lusion Vertical Menus – 9 simple vertical menus.
• Suckerfish Dropdowns – created by HtmlDog.
• CSS Dock Menu
• 8 Web Menus you just can’t miss
• Mini Slide Navigation – a simple slider menu.
• Deluxe CSS Dropdowns and Flyouts

Miscellaneous

Webber 2.0 Dock Menu – web2.0 style drop down menu with CSS and Javascript.
Kollermedia Tabmenu

Unraveled CSS Tabs
CSS Tabs with Submenus – designed by Adam Kalsey.
Tabtastic – one more tab menu here.

Online Menu Generators

Flyout Menu Builder – work at IE and Firefox, created by CSSPlay.
Menu Builder for JSCookMenu – simple and easy generator to create horizontal and vertical menus.

The two generators below i have already mentioned before at 20 Popular CSS Online Tools and Generators.

http://www.webmaster-toolkit.com/css-menu-generator.shtml
http://www.listulike.com/generator/ – create cross-browser list-based navigation bars.

Further Reading

Centered Tabs with CSS – talking about create a flexible, centered alternative to floated navigation lists by Ethan Marcotte.
CSS and Round Corners: Build Accessible Menu Tabs – tutorial for create rounded corner tab mens by Trenton Moss.
Drop-Down Menus, Horizontal Style – create visually appealing drop-downs by using structured HTML and simple CSS.
Horizontal and Vertical CSS Menu Tutorial

Traffic

Two days ago i made the right decision to move my current stats counter to Reinvigorate, one of the best counters in the internet. Actually i got the invited account a few months ago and haven’t used it at all. The perfect interface and design of Reinvigorate is one of my favorite two stat counters, another is Mint. And the traffic mostly came from social bookmarks sites and some design communities. It is exciting that 25 Rounded Corners Techniques with CSS got nearly 600 bookmarks from delicious within 4 days and was featured on the homepage yesterday. It not only help to grow the traffic for CSS Juice and also the target readers. A part of them came from other blogs that quoted my popular posts like 25 Cool Portfolios with Minimalism Design and 20 Popular CSS Online Tools and Generators. The traffic is growing every day from hundreds to thousands.

Subscribe

Here is the total feed stats chart from Feed Burner within these few days. The stats of subscribers is increasing daily and i really appreciate you to subscribe my juicy blog feeds to help CSS Juice growth. Up to now, my short term goal is to get my first 1000 subscribers within 3 months. No doubt, it is not a easy target and i will do all my best .

Passion

At CSS Juice, you will only find all the useful and valuable informative design content, and i always open mind to hear from your voice. And you know there are a lot of CSS resources or lists, so i will not post any similar content except i think mine is better. Besides, another thing i want to mention is that all materials are researched and selected by heart. Bulk list is meaningless so i will not write any posts that title like “Best 100 XXX” or “1000 XXX”, because i trust selection and filter are necessary to make quality posts for readers. Lastly, probably mostly of you here are new, please consider to subscribe my blog feeds to get updates daily.

Grady – designed by Barley Hut. New released on July!

Fluid Solution – designed by Kaushal Sheth, and also offers more than 50 professional themes free to download.

Merdeka – artistic theme with a amazing upter nagvigation, designed by Ikram Zidane.

Upstart Blogger Modicus – designed by minimalist Robert Ellis, and also offer 2-column version.

Upstart Blogger Minim – designed by Robert Ellis.

Grid Focus – designed by Derek @ 5thirtyone.com

Foliage Mod- professional artistic theme design by 5thirtyone.

Gridlock – designed by Eston Bond, the latest version is 1.4.

Barecity – designed by Shahee Ilyas.

Silhouette – designed by Brian Gardner.

Hemingway – design by professional designer Kyle Neath, probably is the most popular one.

Japanese Cherry Blossom – base on Hemingway, excellent re-designed.

Unsleepable – designed by Ben Gray, based on K2.

Simplr – designed by plaintxt.org, the heaven of minimal WordPress themes collection, make sure to check it out.

IAMWW w2 DnD – designed by iamww.com.

Transblack @ romow

Cutline – one of the most popular themes, designed by Chris Pearson, he was also the designer of PressRow.

SimplicityBright – what i can say is elegant, the updated version supported English.

Color Scheme Generators

WellStyled Color Scheme Generator – generator of color schemes and palettes to create well balanced and harmonic web pages.

ColorJack – multiple online color scheme generators used by designers.

Colorschemer Online Version 2

4096 Color Wheel – hover over the color wheel to generate the scheme.

Genopal Online – online harmonious color schemes creator.

Unsafe Colormatch – create 24-bit color schemes online.

Color Mixers – RGB remixing tool.

Transparent PNG Generator – create transparent PNG images in any color.

Colordb – powerful color scheme generator.

Not enough? See also…
Colr – generate color from your own images or flickr.
ColorMatch Redux – simple color scheme generator.
ColorToy 2.0 – flash color schemer.
Visibone Colorlab – simple color wheel.
Dhtmlgoodies Color Schemer
Triplecode Munsell Palette – cool flash-based color picker.
Colorsontheweb – offers various color tools.
Gpeters – instant color scheme from Yahoo images.

Color Palette Generators

ColorHunter – new color palette generator from images.

Color Blender – free online color palette for design and matching.

Swatchify – easily create and share your color palette.

Jrm Color Palette Generator – generate a color palette based on an image.

Not enough? See also…
Degraeve – color palette generator from images.
Slayeroffice – simple color palette creator.
I+Like+Your+Colors – web pages color palette generator.
Bighugelabs – create a harmonious color palette from a photo.

Miscellaneous

Colourlovers – well-know community, resources and color trend for color lovers.

ColorCell – finding the most pleasing color combinations.

Colorcombos – web color combinations testing tool for web developers.

IDEO Web Color Visualizer – background and font color comparison tool.

Kolur – color palette gallery.

Typetester – online application for comparison of the fonts for the screen.

Not enough? See also…
Kuler – quickly create harmonious color themes online.
Daily Color Scheme – daily color scheme based on websites.
Whats Its Color – evaluate an image and give you the image’s complementary dominant colors.
Colrpickr – search Flickr photos based on their color.

Further Reading

1. Understanding color in design – by Dustin Brewer
2. Color Theory for Developers – by Jon Shemitz
3. Secrets of Web Color Revealed – by Color Harmony
4. The Power of Color – by Pegie Stark Adam
5. Choosing color combinations – by Veerle
6. Complete Color Matching Guide – worth to read.
7. Color Design Workbook: A Real-World Guide to Using Color in Graphic Design – by Noreen Morioka and Terry Stone Sean Adams