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.

Kode HTML

1. <div id="areaku"><h2>Anggap Disini Adalah Content.</h2></div>

Kode CSS

view plain print ?

1. #areaku{

2. width:600px;

3. background: #DDD;

4. color: #222;

5. border: 2px solid blue;

6. padding: 10px;

7. }

Hasil:

Anggap Disini Adalah Content.

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

view plainprint?

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

Sehingga kode CSS-nya menjadi seperti ini.

view plainprint?

#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.

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

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

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

4. - 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;