Css Rounded Corners

304 views

Published on

Register domain names and web domains - Hostgee.com offers domain name registration and is a top web hosting provider. Our professional website design and hosting services ensure quality solutions for your business.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
304
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Css Rounded Corners

  1. 1. Create rounded corners with only one image This guide will show you how to make expandable rounded corners with CSS. Using our method will require only 6 HTML tags and one background image. This method also validates, works across all the major browsers, and looks great in your source code. You can download the full rounded corners tutorial by click on the link below. Making the corner images One downside of most of the other methods for creating/ using rounded corners is that they require multiple background images, one for each corner. With our method you only need one. If you take a look at corners.gif in the source files you’ll see how you need to set up your image. The basic premise is to create a full circle, chop it up into 4 segments and put each segment in the opposite corner to what it started in (top left would go into the bottom right, etc). The last thing to do is put a white (or other colour) background behind the segments and then save the image. HTML Code <ul class=”roundedCornerWrapper”> <li class=”top”> <span></span> </li> <li class=”middle”> Heart Internet </li> <li class=”bottom”> <span></span> </li> </ul> Keeping the HTML short and valid is important for many reasons, so for the rounded corners we’re going to use an unordered list with some span elements. There may be shorter methods, but this is quick, easy, and validates. The full tutorial including HTML, CSS and Graphics can be download via the link below: http://www.hostgee.com/blog/Rounded_Corners.zip Page 1

×