Web sitelerinde gördüğümüz gözlerimizi kamaştıran yuvarlak köşeleri hiçbir image veya resim kullanmadan web sayfalarımıza eklemek hiç zor değil aşağıda bahsedeceğimiz küçük bir css tekniği ile yuvarlak köşelere sahip olabiliyoruz.

Resimsiz Css Style Kodları

<style type=”text/css”>
.mnykdm{display:block}
.mnykdm *{
  display:block;
  height:1px;
  overflow:hidden;
  font-size:.01em;
  background:#b20000}
.mnykdm1{
  margin-left:3px;
  margin-right:3px;
  padding-left:1px;
  padding-right:1px;
  border-left:1px solid #870000;
  border-right:1px solid #870000;
  background:#9f0000}
.mnykdm2{
  margin-left:1px;
  margin-right:1px;
  padding-right:1px;
  padding-left:1px;
  border-left:1px solid #6f0000;
  border-right:1px solid #6f0000;
  background:#a30000}
.mnykdm3{
  margin-left:1px;
  margin-right:1px;
  border-left:1px solid #a30000;
  border-right:1px solid #a30000;}
.mnykdm4{
  border-left:1px solid #870000;
  border-right:1px solid #870000}
.mnykdm5{
  border-left:1px solid #9f0000;
  border-right:1px solid #9f0000}
.mnykdmfg{
  background:#b20000}
</style>

Web sitemize ekleyeceğimiz DIV kodları

<div>
  <b class=”mnykdm”>
  <b class=”mnykdm1″><b></b></b>
  <b class=”mnykdm2″><b></b></b>
  <b class=”mnykdm3″></b>
  <b class=”mnykdm4″></b>
  <b class=”mnykdm5″></b></b>

  <div class=”mnykdmfg”>
    <!– content goes here –>
  </div>

  <b class=”mnykdm”>
  <b class=”mnykdm5″></b>
  <b class=”mnykdm4″></b>
  <b class=”mnykdm3″></b>
  <b class=”mnykdm2″><b></b></b>
  <b class=”mnykdm1″><b></b></b></b>
</div>

Resimli Css Style Metodu

Bu metod yardımı ile yuvarlak köşeler oluşturmak için  

 .yuvarlak {
width: 250px;
background-color: #f90;
color: #fff;
}

.yuvarlak p {
margin: 0 10px;
}

.ust {
background: url(tr.gif) no-repeat top right;
}

.alt {
background: url(br.gif) no-repeat top right;
}

img.kose {
width: 15px;
height: 15px;
border: none;
display: block !important;
}

Sitemize Ekleyeceğimiz DIV kodları

<div class=”yuvarlak”>
<div class=”ust”>
<img xsrc=”tl.gif” alt=”"
width=”15″ height=”15″ class=”kose”
style=”display: none” /></div>
Resimli yuvarlak köşelerle oluşturulmuş bir div örneği
<div class=”alt”>
<img xsrc=”bl.gif” alt=”"
width=”15″ height=”15″ class=”kose”
style=”display: none” /></div>
</div>