round corners with css sprites

Posted by mahesh chari Published in css, Html

round corners with css sprites

We know that all modern web browsers supports rounded corner elements but it doesn’t work in IE6.we know that all majority users are IE6 after the fire fox in organizations.here we use CSS sprites technique ,we already discussed about the advantage of the CSS sprites in my previous post.

Steps

Download Script/Source Code
here we make the 16degrees rounded corners.for that we use 32x32px(twice the corner size) circle image as shown below.

we create four corner divs in a container divs and place them at every corner and with a given image is back ground.
Below example is self explanatory with comments in it.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Round Corners With CSS</title>
<style type="text/css">
<!--
.roundeddiv { 
	width: 400px;
	position: relative;
	background-color: #006702;
	padding: 0px;
	display: block;
}
<!-- Here we use on class common for all corners that shares commen properties-->
.corner {
	background-image: url(round.jpg);
	position: absolute;
	height: 16px;
	width: 16px;
	background-repeat: no-repeat;
	overflow: hidden;
	z-index: 1;
	margin: 0px;
	padding: 0px;
}
h3 {
	margin: 0px;
	padding: 0px;
}
 
.container {
	position: relative;
	padding: 16px;
}
<!-- we come from top right as anti clock wise -->
<!-- Top Right Corner  -->
.tr {
	top: 0px;
	right: 0px;
	background-position: -16px 0px;
}
<!--Bottom Right Corner -->
.br {
	right: 0px;
	bottom: 0px;
	background-position: -16px -16px;
}
 
<!--Bottom Left Corner -->
.bl {
	left: 0px;
	bottom: 0px;
	background-position: 0px -16px;
}
<!--Top Left Corner -->
.tl {
	background-position: 0px 0px;
	left: 0px;
	top: 0px;
}
 
-->
</style>
</head>
<body>
<div class="roundeddiv">
<!-- start corner divs -->
  <div class="corner tr"></div>
  <div class="corner bl"></div>
  <div class="corner br"></div>
  <div class="corner tl"></div>
<!-- end corner divs -->
<!-- start content -->
  <div class="container">
    <h3>Rounded Corners Example </h3>
    <h3>Rounded Corners with CSS sprites Tutorials. </h3>
  </div>
<!-- end content -->
</div>
</body>
</html>

Download Script/Source Code

Popularity: 6% [?]

Share and Enjoy: