In a previous tutorial, we looked at rounding corners with images using CSS. Though, the page can be optimized for loading speed further by using no images. CSS allows us to use styles that can achieve this effect. Rounded corners work well on sites that need to highlight content on the home page such as ads, new products or news.
Here is the result produced by the code given here:
This is so easy to edit for any usage. Here, the use of a DIV tag with the content means that it can be used with content that is positioned anywhere on the page. Expanding or shrinking the size of the DIV box is straightforward. It will automatically adjust itself to fit the content in the box. Rounded corners give pages with text boxes a more attractive appearance.
Now for the code:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Corner without images</title>
<style type=”text/css”>
body{padding: 20px;background-color: #FFF;
font: arial}
h1,h2,p{margin: 0 10px}
h1{font-size: 250%;color: #FFF}
h2{font-size: 200%;color: #f0f0f0}
p{padding-bottom:1em}
h2{padding-top: 0.2em}
div#background{ margin: 0 10%;background: #9BD1FA} /* Setting the background for content and color */
b.rtop, b.rbottom{display:block;background: #FFF} /* Setting the corner color, use different color for different layout */
b.rtop b, b.rbottom b{display:block;height: 1px; overflow: hidden; background: #9BD1FA}/* Setting the strip size and background
color */
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 1px}
</style>
</head>
<body>
<div id=”background”>
<b class=”rtop”><b class=”r1″></b><b class=“r2″></b><b class=”r3″></b><b class=”r4″></b></b>
<h1>Boxes Like This With Corners <br>Highlight Your Business Benefits</h1><br>
<p>There are many uses for these boxes. Rounded corners can add some spice to an otherwise dull page. </p>
<ul><li>Smooth Boxes</li><li>Easy To Set Up </li><li>Good for highlighting content</li></ul>
<h2>Have you tried rounded corners?</h2>
<p>Give it a whirl…and see if it can add some extra visual appeal to your web pages.</p>
<b class=”rbottom”><b class=”r4″></b><b class=”r3″></b><b class=”r2″></b><b class=”r1″></b></b>
</div>
</body>
</html>
Try placing the code into several types of pages such as tables and different designs. You will find it easy to use the code in various ways.
Go ahead, round those corners!
Lovely that this article is crap. The example does not work. I copied it, pasted into a file, ran it into apache and it prints out the text with no formatting, no nothing.
The best part of the whole thing is that article is about using CSS to defined rounded corners without images AND THE EXAMPLE SHOWN ABOVE IS A .JPG file. I did a “view source” if I could figure out how to use CSS. Here is the .jpg file from the source
http://images.ientrymail.com/rodney/rounded.jpg
Select your
printer brand, choose either inkjet or laser toner, then the
printer model and let us do the rest.
Mark:
Worked for me. Rule of Thumb: Never just copy and paste the code from the website and expect it to work.
You have to have knowledge of coding rules. When you copy the code on this page, it is not going to have the quotes correctly (anywhere, tags for instance. Very important to watch that, otherwise, the Character Entity for the quotes are going to be used and nothing will work. As you’ve experienced.you have to go through the code and replace them.
Otherwise, it worked great.
Thanks to the Author for sharing.
…And; I’m sure the author used an image because they are posting to this website and are probably not administrators of it; I’m not sure if this site is configured in such a way to leave “Live” examples. In order to show you an example they post a picture of the example and paste their code in their post.
I copied the code and set the quotation marks correctly, but this still does not work.
All I see is a sharp cornered aqua box with some text in it.
And really, why isn’t there an example page!?!?
P.S.
Tested on the three major browsers.
So is this a [not funny] joke?
Here’s something I’ve found that actually works…
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
both for mozilla and webkit (won’t work on IE, not until 2018 anyway).
doesnt work
copied & pasted in dreamweaver
I tried it and had the same problem as Mark, but once I read Robert’s comment and changed every single quote, it worked for me. Tested it on Chrome, Firefox and IE.
It works. To make it work in IE6/7 as well as FF/Safari/mozilla and thereby all the browsers that actually matter, use the border-radius.htc file .
so you’ll have this in the css:
.whateverYouCallYourClass {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
behavior:url(border-radius.htc);
}
and the html would be:
content here</div
Go to google.code.com and you can download the sample file that has the .htc file.
this technique sucks and doesnt work
It worked after I corrected the quotes. Thanks to the author for sharing. Retyped code follows below.
Corner without images
body{padding: 20px;background-color: #FFF; font: arial}
h1,h2,p{margin: 0 10px}
h1{font-size: 250%;color: #FFF}
h2{font-size: 200%;color: #f0f0f0}
p{padding-bottom:1em}
h2{padding-top: 0.2em}
div#background{ margin: 0 10%;background: #9BD1FA} /* Setting the background for content and color */
b.rtop, b.rbottom{display:block;background: #FFF} /* Setting the corner color, use different color for different layout */
b.rtop b, b.rbottom b{display:block;height: 1px; overflow: hidden; background: #9BD1FA} /* Setting the strip size and background color */
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 1px}
Boxes Like This With Corners Highlight Your Business Benefits
There are many uses for these boxes. Rounded corners can add some spice to an otherwise dull page.
Smooth BoxesEasy To Set Up Good for highlighting content
Have you tried rounded corners?
Give it a whirl…and see if it can add some extra visual appeal to your web pages.
It’s not working..
Doesn’t work. Example is a JPEG!
author should have bothered to followup with the comments and help satisfy the problem with posting the code.
This example works! I tried it on Eclipse (not on other browsers yet). Thing is, if you paste the example, you need to replace all the quotes in the code, even the ones that look good.
Really like this example, thanks!!
This is not really good by default, till I changed the last line of the style:
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
The height is changed into 2px, and everything works well. (without zoom)
thats awesome
i dint expected i can do rounded corners without images
great idea worked well in all browsers
Thanks
venu
It’s not working. I don’t even see the box. Are you sure this is the correct code?
Fixed the quotes and it still doesn’t work
Got it to work! I forgot to fix these quotes:
After that it worked,
Thanks…
The ones I forgot to fix were the ones on the style type = “text/css”
I’m new to CSS (older school PHP / MySQL / Web 2.0 developer taking another swing at making webpages). My opinion is that if you’re giving an example, you should make the example as concise as possible. I bet you could remove 80% of the text from this page and still teach how to make rounded corners. I didn’t learn how to make CSS rounded corners from this page. This page is a great example: http://www.css3.info/preview/rounded-border/
Very good work. Rounded Corners in plain css and no images!.
Yes small stuff to correct around like quotes on a cut and paste. Other than that it definitely works.
Cheers!
Peter
I got this example to work after adjusting it, but I noticed that the corners themselves aren’t very adjustable, if you increase the size of them it makes the effect look bad.
I read all the comments, corrected the quotes, prettied up the code to make it more presentable and it did not work at all, before or after I altered it. Square corners in FF, IE, Chrome and Opera. Very bad example.
Tut mir leid! funktioniert weder im Firefox noch im IE.
Seite mit Copy-Paste eingefügt!
trotzdem danke für den Versuch.
Jordi.
Works well. But not via copy & paste as mentioned already.
Here is a live version, so you can the working code save by your browser’s “Save as…” dialog: http://conbrio.at/rounded_corners_ohne_img.htm
I copied the code, fixed the ” and it worked perfectly.
Thank you everyone involved, especially the author, for all the help.
Thanks for giving us the live link.
Been studying this for a while and I hope could master this.
Round corners is pretty coll effect and will use this to edit my site.
Thanks for the author.
Please don’t use smart quotes: it makes copy/pasting your sample code a bit of a pain.
Actually, I would recommend embedding the code itself in the page and letting people use their browser’s “inspect element” to explore the sample.
Works perfectly in IE, Opera, Chrome and firefox. To have larger rounded corners, you need to add more r classes.
Not perfect, but until browsers fully support CSS3, it’s probably the best fix out there with cross browser support.
Pingback: 25 Rounded Corners Techniques with CSS « Impact Web Design Blog