Cara membuat sudut melengkung dengan CSS

Pada umumnya setiap kali kita membuat sebuah batasan atau garis border pada suatu area, maka hasil yang kita dapatkan pastilah berbentuk persegi. Namun tentu para sobat sekalian pernah melihat ada blog atau website yang memiliki widget content dengan sudut yang kelihatan melengkung atau tumpul.

Nah pada postingan kali ini kita akan membahas sedikit bagaimana caranya agar sudut-sudut ter sebut menjadi melengkung atau menjadi tumpul. Agar bisa langsung mengerti kita akan langsung saja masuk ke metode pembuatannya dan contoh tutorial pembuatannya.

Sebagai contoh anggap saja kita telah memiliki kode HTML dan CSS sebagai berikut:
Kode HTML

Anggap Disini Adalah Content.

Kode CSS

#areaku{
width:600px;
background: #DDD;
color: #222;
border: 2px solid blue;
padding: 10px;
}

Hasil:

Anggap Disini Adalah Content.

Sekarang kita tambahkan sedikit kode CSS dengan format perintah seperti ini.

border-radius: 15px; /*Kode pembuat lengkungan sudut*/

Sehingga kode CSS-nya menjadi seperti ini.

#areaku{
width:600px;
background: #DDD;
color: #222;
border: 2px solid blue;
padding: 10px;
border-radius: 15px; /*Kode pembuat lengkungan sudut*/
}

Maka dengan penambahan kode tersebut kita akan langsung mendapatkan hasil seperti dibawah ini.

Anggap Disini Adalah Content.

Seperti yang kita lihat, maka kita langsung mendapatkan hasil dengan lengkungan yang sama disetiap sudut. Seperti halnya dalam pembuatan border, maka pembuatan lengkungan pada sudut border ini juga bisa dilakukan secara individu. Secara individu rumus untuk pembuatan border radius ini juga bisa kita lakukan seperti ini.

- border-top-left-radius: 15px; = /*digunakan jika kita hanya ingin membuat lengkungan pada sudut kiri atas.*/
- border-top-right-radius: 15px; = /*digunakan jika kita hanya ingin membuat lengkungan pada sudut kanan atas.*/
- border-bottom-right-radius: 15px; = /*digunakan jika kita hanya ingin membuat lengkungan pada sudut kanan bawah.*/
- border-bottom-left-radius: 15px; = /*digunakan jika kita hanya ingin membuat lengkungan pada sudut kiri bawah.*/

Selain itu perintah ini juga bisa dilakukan dengan perintah singkat. Hal ini bisa kita lakukan dengan perintah seperti ini.

1. Border-radius: 15px 0px;
Dengan perintah tersebut hasilnya sama dengan perintah individu:

- border-top-left-radius: 15px;
- border-top-right-radius: 0px;
- border-bottom-right-radius: 15px;
- border-bottom-left-radius: 0px;

2. Border-radius: 0px 15px;
Dengan perintah tersebut hasilnya sama dengan perintah individu:

- border-top-left-radius: 0px;
- border-top-right-radius: 15px;
- border-bottom-right-radius: 0px;
- border-bottom-left-radius: 15px;

3. Border-radius: 15px 15px 0px;
Dengan perintah tersebut hasilnya sama dengan perintah individu:

- border-top-left-radius: 15px;
- border-top-right-radius: 15px;
- border-bottom-right-radius: 0px;
- border-bottom-left-radius: 15px;

4. Border-radius: 0 15px 15px;
Dengan perintah tersebut hasilnya sama dengan perintah individu:

- border-top-left-radius: 0px;
- border-top-right-radius: 15px;
- border-bottom-right-radius: 15px;
- border-bottom-left-radius: 15px;

5. Border-radius: 15px 0 15px;
Dengan perintah tersebut hasilnya sama dengan perintah individu:

- border-top-left-radius: 15px;
- border-top-right-radius: 0px;
- border-bottom-right-radius: 15px;
- border-bottom-left-radius: 0px;

6. Border-radius: 0px 0 15px;
Dengan perintah tersebut hasilnya sama dengan perintah individu:

- border-top-left-radius: 0px;
- border-top-right-radius: 0px;
- border-bottom-right-radius: 15px;
- border-bottom-left-radius: 0px;

7. Border-radius: 15px 0 0 15px;
Dengan perintah tersebut hasilnya sama dengan perintah individu:

- border-top-left-radius: 0px;
- border-top-right-radius: 15px;
- border-bottom-right-radius: 15px;
- border-bottom-left-radius: 0px;

8. Border-radius: 0 15px 15px 0;
Dengan perintah tersebut hasilnya sama dengan perintah individu:

border-top-left-radius: 15px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 15px;

Dan Lain Sebagainya........

Share this post