Rounded corners possible with Dojo?

[mrgreen132]

Hi,

Sorry if this is the wrong place, but does anyone know if/how it is possible to round the corners of <div> elements using the dojo framework?

Rico has a nice little function that does it, however using that with dojo on the same page seems to cause problems......ie the corners dont round properly

cheers

mrgreen

[muazzez]

http://kalsey.com/2003/07/rounded_corners_in_css/


<style type="text/css">
.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;
}


</style>

<div class="roundcont">
<div class="roundtop">
<img src="tl.gif" alt=""
width="15" height="15" class="corner"
style="display: none" />
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt 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>



<style type="text/css">
.roundcont {

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


</style>
<table width="70%"><tr><td>

<div class="roundcont">
<div class="roundtop">
<img src="tl.gif" alt=""
width="15" height="15" class="corner"
style="display: none" />
</div>

<p>Farklı renkte köşe yapma ve divin rengini de köşe renginden yapma. rgb(153,0,153) Bu bir renk kodu. rgb yani redGreenBlue yani kırmızıYeşilMavi
kırmızı 153, yeşil 0, mavi 153 imiş. Şimdi şunu yap. Paint programını aç. (Resim yapma programı). Bir renk seçeceğiz kendimize. Renkler, renkleri düzenleyi tıkla. Özel renk tanımla ya tıkla.Kırmızı, yeşil, mavi yazılarının sağında içinde sayı olan kutuyu gör. Kırmızı nın sağındaki kutuya 153 yaz. Yeşil yazısının sağındaki kutuya 0 yaz. Mavi yazısının sağındaki kutuya 153 yaz. Sonra özel renklere ekle butonuna tıkla. Tamam butonuna tıkla. İstediğin renk eklenmiş olacak paint sayfasındaki renklere. Bir koşeyi yapıp renklendir. Ben var olan bir solUst.bmp resmini farklı kaydettim. Sonra bu resmi döndür/çevir ile diğer resimleri de kaydettim. Şimdi sıra css kodundaki rengi de aynı yapmaya geldi. rgb(153,0,153) rengimiz bu idi. background-color: buraya renk yazılıyor; background-color: rgb(153,0,153); Kaydet. Sayfayı açıp bak. Tamamdır. </p>

<div class="roundbottom">
<img src="bl.gif" alt=""
width="15" height="15" class="corner"
style="display: none" />
</div>
</div>
</td></tr></table>

[mrgreen132]

thanks for that!

may end up using that method, though was wanting it to be rendered rather than using images.

Thanks!!

[muazzez]

Welcome to the forum!