4 corner image :
ei khetrey 4 ta rounded corner image use kora hoi one image each of the corner....then 4 ta class use korey shegula position kora hoi...IE display issue r jonno clear namey arekta class o add kortey hoi ...for getting the exact look.
html code:
Code: Select all
<div class="bl"><div class="br"><div class="tl"><div class="tr">
Lorem ipsum dolor sit amet consectetur adipisicing elit
</div></div></div></div>
<div class="clear"> </div>
Code: Select all
.bl {background: url(bl.gif) 0 100% no-repeat #e68200; width: 20em}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}
.clear {font-size: 1px; height: 1px}
html code:
Code: Select all
<div class="roundcont">
<div class="roundtop">
<img src="tl.gif" alt=""
width="15" height="15" class="corner"
style="display: none" />
</div>
<p> ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in culpa qui officia deserunt mollit
anim id est laborum.</p>
<div class="roundbottom">
<img src="bl.gif" alt=""
width="15" height="15" class="corner"
style="display: none" />
</div>
</div>
Code: Select all
.roundcont {
width: 250px;
background-color: #f90;
color: #fff;
}
.roundcont p {
margin: 0 10px;
}
.roundtop {
background: url(tr.gif) no-repeat top right;
}
.roundbottom {
background: url(br.gif) no-repeat top right;
}
img.corner {
width: 15px;
height: 15px;
border: none;
display: block !important;
}
No image way!: round corner can also be achieved without using images but this trick requires lots of nested tags.
Code: Select all
HTML:
<ul>
<li>
<a href="/">
<b>
<b>
<b>
Content Here
</b>
</b>
</b>
</a>
</li>
</ul>
CSS:
li a {
display:block; /* a must */
border: solid #666;
border-width: 0 1px; /* left and right borders only */
text-decoration: none;
outline:none; /* so as not to distract from the effect */
color: #000;
background: #e4e4e4;
}
li a b {
display: block; /* another must */
position:relative; /* because the child elements are positioned */
top: -1px; /* drag it up a little, creates the top notches */
left: 0;
border:solid #666;
border-width:1px 0 0; /* top border only */
font-weight:normal;
}
li a b b {
border-width:0 0 1px; /* bottom border only */
top: 2px; /* pushed down a little to create the bottom notches */
}
li a b b b { /* i don't think three-deep tag is even necessary */
top:-1px;
padding: 1px 6px;
border-width: 0;
}
CODE:
Code: Select all
HTML:
<div class="round">
CONTENT HERE
</div>
CSS:
.round {
-webkit-border-radius: 10px;
-moz-border-radius: 10px /* as of Firefox 3, they even look good there */
}
round corner er jonno javascript o use kora jai...also there are some free round corner generators are available online
Personally I think if javascript or any javascript framework is used to achieve round corner that may hamper the overall website performance.But still if the script is small in size and its easier to implement then why shouldn't we use it...
boro bhaia and apu ra plz share with us the way you follow.....