CSS rounded corners is a very nice effect. There are many ways to achieve it.
The easiest and fastest way is to use CSS round corner options. The good thing its fast and easy. The bad thing Internet Explorer browser does not support these options. If Internet Explorer isn’t important for you, use options listed below.
www.Webtoolkit.info is also using this method, if you are using Firefox, Safari, or Webkit engine based browser you can see rounded corners everywhere on this page.
You can use these CSS options on any block elements: tables, divs, input fields, etc.
Source code for webtoolkit.roundedcorners.css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
.roundedCorners {
border: 1px solid #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.roundedTopCorners {
border: 1px solid #000;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
}
.roundedBottomCorners {
border: 1px solid #000;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
}
|
Source code for index.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>My project</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link media="screen" type="text/css" rel="stylesheet" href="/webtoolkit.roundedcorners.css" />
</head>
<body>
<div class="roundedCorners">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="roundedTopCorners">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="roundedBottomCorners">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</body>
</html>
|