Untuk memperindah tampilan website, web designer dapat membuat tampilan border melengkung atau border rounded corner. Tentu saja border melengkung ini harus dikonsep sejak awal sehingga sesuai dengan disain secera keseluruhan.
Property-property yang dapat digunakan untuk border melengkung atau border rounder corner ini adalah
- border-top-left-radius: x y;
Nilai x menunjukkan lebar lengkung, sedangkan y menunjukkan tinggi lengkung - border-top-right-radius: x y;
Nilai x menunjukkan lebar lengkung, sedangkan y menunjukkan tinggi lengkung - border-bottom-left-radius: x y;
Nilai x menunjukkan lebar lengkung, sedangkan y menunjukkan tinggi lengkung - border-bottom-right-radius: x y;
Nilai x menunjukkan lebar lengkung, sedangkan y menunjukkan tinggi lengkung
Sebagai contoh kita dapat membuat coding seperti berikut ini:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<title>Border melengkung </title>
<style type=”text/css”>
.lengkung
{
width: 300px;
height: 100px;
background-color: blue;
border-top-left-radius: 20px 10px;
border-top-right-radius: 20px 10px;
border-bottom-left-radius: 20px 10px;
border-bottom-right-radius: 20px 10px;
}
</style>
</head>
<body>
<div class=”lengkung”>
</div>
</body>
</html>
Hasil coding dapat dilihat di http://aris.proweb.asia/border_melengkung.html dengan tampilan seperti gambar di bawah ini
Kunjungi www.proweb.co.id untuk menambah wawasan anda.