Designing web page with the help of CSS is often easier than imagined. The need is to know how best a particular design can be done with safe and clean code.
There is no dearth of resources on the web that give you helpful advice – often free – on implementing CSS. Of special mention must be W3Schools, HTML.net, A List Apart, and SitePoint, the last two for advanced CSS techniques.
In this video article we will look at 2 ways of creating rounded corners with the help of simple CSS codes.
Rounded corners can be created with JavaScript also, and we will cover one easy way of doing that in a future article.
In the first example below of creating rounded corners we will use the CSS3 ‘border-radius’ property followed by the second example using corner images.
Rounded Corners With ‘border-radius’ Property
The ‘border-radius’ property is slated to become a part of CSS3 recommendations when it is finalized. Refer W3C working draft for more on the issue.
Not all browsers support the Gecko-based or WebKit-based CSS features – IE for example does not support either – that go into the making of rounded corners with ‘border-radius’ property.
Let us look at the following example, followed by the HTML code including CSS code in the head section.
<html><head>
<title>Rounded corners With border-radius Property</title>
<style>
.roundbox {
background: #900090;
width: 500px;
padding:1.2em;
font: 0.9em Verdana, Arial, Helvetica, sans-serif;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
}
.roundbox p {
margin: 0 1.0em 0.8em 0.8em;
text-align: justify;
color: #FFF;
}
</style>
</head>
<body>
<div class="roundbox">
<p>This is an example of rounded corners. You can easily do it for your website.</p>
<p>The HTML and the CSS codes are available with this demonstrative article. Copy and paste them in your favorite HTML editor, which may be a plain text editor like notepad.</p>
<p>When you save the file do not forget to give it a html extension.</p>
</div>
</body>
</html>
The 2 lines of code (below) make the rounded corners of 25px each:
-moz-border-radius: 25px;
-webkit-border-radius: 25px;You can of course increase or decrease the border-radius values to suit your need. If however you remove these 2 lines the box becomes square with no curves (see below). This is what you see in IE browser irrespective of including the ‘border-radius’ property.
Rounded Corners With Images
An easy way of avoiding the CSS3 ‘border-radius’ property is to try with images of rounded corners. Here again you have 2 ways of getting images.
The first of course is to draw a circle filled with color of your choice, and then break it into four quarters of equal size (see the picture below).
The second and easier way to get the rounded corner images is by using the free tool, Spanky Corners, created by SitePoint’s Alex Walker. This is all the more handy because you may not have the tool to create an anti-alias image of the circle.
Okay, after you choose the foreground and background colors and mention the corner radius you want – between 5px and 60px – Spanky Corners tool soon dishes out images of 4 rounded corners.
I choose the hexadecimal color #900090 for the foreground and white color for the background, and a radius of 20px for the rounded corner images.
Let me right-click on each and save the images in my computer. For easy understanding I name the 4 corner images as top-left, top-right, bottom-left and bottom-right respectively.
The HTML code with the CSS styles in the head section is as under that uses the 4 images to make the rounded corner box coming below the code.
HTML Code – Rounded Corners With Images
<html><head>
<title>Rounded Corners With Images</title>
<style>
.roundbox {
background: #900090;
width: 500px;
font: 0.9em Verdana, Arial, Helvetica, sans-serif;
}
.roundbox p {
margin: 0 1.0em 0.8em 1.0em;
text-align: justify;
color: #FFF;
}
.roundtop {
background: url(top-right.gif) no-repeat right top;
}
.roundbottom {
background: url(bottom-right.gif) no-repeat right top;
}
.roundbottom img {
display:block;
}
</style>
</head>
<body>
<div class="roundbox">
<div class="roundtop"><img src="top-left.gif" width="19" height="38" /></div>
<p>This is an example of rounded corners. You can easily do it for your website.</p>
<p>The HTML and the CSS codes are available with this demonstrative article. Copy and paste them in your favorite HTML editor, which may be a plain text editor like notepad.</p>
<p>When you save the file do not forget to give it a html extension.</p>
<div class="roundbottom"><img src="bottom-left.gif" width="20" height="20" /></div>
</div>
</body>
</html>
HTML Code Explained
While the div class ‘roundbox’ wraps around the whole thing, the 2 other div classes within, ‘roundtop’ and ‘roundbottom’ actually define the rounded corners by embedding the images.
Both ‘roundtop’ and ‘roundbottom’ are styled to have the right corner images as the backgrounds.
As for the left corner images, they are included in the main html code, coming within the respective div classes.
In future we will look at how you can have 2 or more rounded corner ‘rectangles’ side by side.
 This article of October 13th, 2009 is authored by Partha Bhattacharya, who runs this website. Catering to the clients' video needs aside, Partha also writes guest articles for other web publications. |
[...] Read more from the original source: 2 Simple Ways To Design Rounded Corner With CSS : 2WebVideo Video … [...]
Since the browsers respond differently to CSS3
The safe way is using jQuery.
Here there is another way of making Rounded Corner with CSS
$(‘#one’).append(”);
#one{
width: 250px;
background-color: #55638d;
color: #fff;
position: relative;
padding: 25px;
margin: 20px;
border-radius:50px;
-moz-border-radius:30px;
-webkit-border-radius:50px;
}
Lorem ipsum …
@toni, are you sure the code you mention is okay?
The article though covers the Gecko-based or WebKit-based border-radius property.
Yes, rounded corners can be made with JavaScript, and I’ll cover that in future. But surely CSS is much ‘safer’ to use than jQuery if only because many viewers (minuscule maybe) have JS not enabled in their browsers.
Hi,
This is a great article. Thank you for this wonderful info.
Thanks Misun.
thank you..best palace to learn round corner tab’s and table’s..thanks again.