Tips Cara Membuat Sudut Melengkung (Rounded Corner) di CSS. Untuk membuat sudut membulat, sudut melengkung atau rounded corner, di CSS3 kita menggunakan property border-radius. Nilai untuk property berupa satuan panjang seperti pixel, atau em. Semakin tinggi nilainya, semakin melengkung efek yang dihasilkan.
Efek sudut melengkung atau sering disebut dengan rounded corner sebenarnya sudah lama diidam-idamkan oleh web designer, tapi baru di dalam CSS3 efek ini bisa dibuat langsung dengan CSS.
Tips Cara Membuat Sudut Melengkung (Rounded Corner) di CSS
Dalam tutorial belajar CSS3 kali ini saya akan membahas cara membuat sudut lengkung (rounded corner) di CSS menggunakan property border-radius.
Berikut contoh cara membuat rounded corner:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Belajar CSS</title><style> div { width: 200px; height: 50px; border: 4px solid black; border-radius: 10px; }</style></head><body> <div></div></body></html> |
Dalam contoh diatas, saya membuat sebuah box menggunakan tag <div>. Efek rounded corner dihasilkan dari property border-radius: 10px yang akan membuat keempat sudut box melengkung.
Bagaimana cara mengubah warna border ini? kita cukup merubahnya dari property border dan secara otomatis warna border-radius juga ikut berubah:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Belajar CSS</title><style> div { width: 200px; height: 50px; border: 4px solid green; margin: 10px; } .satu {border-radius: 10px;} .dua {border-radius: 20px;} .tiga {border-radius: 30px;} .empat {border-radius: 40px;}</style></head><body> <div class="satu"></div> <div class="dua"></div> <div class="tiga"></div> <div class="empat"></div></body></html> |
Kali ini saya membuat 4 kotak yang masing-masingnya menggunakan nilai border-radius yang berbeda-beda. Dapat terlihat bahwa semakin tinggi nilainya, semakin ‘membulat’ efek yang dihasilkan.
Tips Cara Membuat Sudut Melengkung (Rounded Corner) di CSS