Kalian bisa membuat gambar terlihat bundar atau lonjong dengan menggunakan properti yang satu ini. Properti ini adalah border-radius. Border-radius juga mempengaruhi bentuk border. Kalian bisa menggunakan properti ini pada hampir semua elemen HTML yg terlihat di halaman. Dalam kode HTML di bawah ini, saya menggunakan gambar dan tombol.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<style>
body{
background : yellow;
}
img{
width : 45%;
height:auto;
border-color : orange;
border-width : 4px;
}
.gambar1{
border-radius : 0%;
border-style: double
}
.gambar2{
border-radius : 25%;
border-style : solid;
}
.gambar3{
border-radius : 50%;
border-style : outset;
}
.tombol{
border-radius : 100%;
border-style : groove;
width : 100px;
height : 100px;
}
</style>
</HEAD>
<BODY>
<h2>Judul</h2>
<div style="float:left">
<img src="gambarku.jpeg" class="gambar1"/>
<img src="gambarku.jpeg" class="gambar2"/>
</div>
<div style="float:right">
<img src="gambarku.jpeg" class="gambar3"/>
<button class="tombol">Bunder</button>
</div>
</BODY>
</HTML>Border radius digunakan untuk mengubah sudut-sudut yang awalnya berbentuk persegi atau persegi panjang menjadi melengkung jika nilainya bukan 0%. Nilai dibawah 50% selain 0% akan membentuk persegi / persegi panjang yang sudutnya melengkung.
Border-radius yang bernilai antara 50% s.d. 100% akan mengubah bentuk elemen HTML menjadi lingkaran atau elips. Elemen HTML akan berbentuk lingkaran jika tinggi dan lebarnya sama. Jika ukurannya berbeda, maka hasilnya adalah bentuk elips atau lonjong.