| Rounded corners CSS |
| 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. Source code for index.html <!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> Source code for webtoolkit.roundedcorners.css .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; } |
| Sumber : http://www.webtoolkit.info/rounded-corners-css.html | Download Article |
Tidak ada komentar:
Posting Komentar