Your SlideShare is downloading. ×
Css Rounded Corners
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Css Rounded Corners

194

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 …

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
194
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×