Best way to achieve round corner

[anisurreza]

round corner make korar onek dhoroner way achey...tar modhhey ami koikta boli...

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">&nbsp;</div>

CSS code:

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} 

4ta image use korey another easy way hoilo...content ,top corners , bottom corners eivabey puro structure takey break kora....codes given below

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>	

CSS code:

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;
}

using CSS property: jodi IE6 key bordast kortey paren taholey this trick will be very useful..dukhhojonok holeyo ekhono onekey IE6 use korey....

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.....

[Tariq]

Thanks ...

[parthasarker]

Nice tutorial...

Here is another way where you need not use any images...


HTML
=======================

Code: Select all

<div id="container">
<b class="rtop">
  <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
</b>
<!--content goes here -->
<b class="rbottom">
  <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>
</b>
</div> 

CSS
==================

Code: Select all

.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px} 

Thanks