Siang sobat D42n, pasti sobat merasa bosan dengan
tampilan website yang semuanya erbentuk kotak. Kali ini saya akan menawarkan
solusi cara membuat kotak di website melengkung dengan bantuan sedikit CSS
yaitu menggunakan border-radius. Apa fungsi border-radius itu sendiri?
Border-radius berfungsi untuk membuat lengkungan atau
melengkungkan sudut-sudut pada sebuah kotak di website.
Meskipun berbentuk kotak pada sebuah website itu terlihat
minimalis, namun dibalik semua itu terkadang ada sifat bosan atau ingin
terlihat beda dari yang lain. Maka dari itu saya akan menyampaikan cara
melengkungkan sudut-sudut kotak pada website.
Cara Membuat Garis Border Melengkung pada Website
Langkah Membuat Garis Border Melengkung sebagai berikut:
1. Buka aplikasi editor yang sobat miliki, seperti notepad
ataupun adobe dreamweaver.
2. Tuliskan kode berikut:
<html>
<head>
<style type="text/css">
div{
width:300px;
height:200px;
border:2px solid gray;
border-radius:20px;
}
</style>
<title>Untitled Document</title>
</head>
<body><div><br />
Disini saya menggunakan border-radius untuk membuat lengkungan di sudut-sudut
kotak pada website saya</div>
</body>
</html>
3. Simpan file berikut dengan nama index.html
di htdocs dan buat folder baru bernama “border”.
4. Jalankan aplikasi Xampp dan buka aplikasi
browser sobat dan tuliskan di URL “localhost/border” dan lihat hasilnya.
5. Selesai.
Sudut- sudutnya menjadi melengkung, sobat
bisa mengubah seberapa kelengkungan yang sobat inginkan dengan mengatur pada
border-radius nya.
Demikianah cara membuat border melengkung pada
website dengan border-radius.
Semoga Bermanfaat!!!
0 Komentar