Cara Membuat Sudut Melengkung (Rounded Corner) di CSS

Rounded Corner artinya sudut lengkung, dengan CSS3 Properti border-radius dapat memberikan efek “sudut lengkung” pada setiap elemen.

<!DOCTYPE html>
<html>

<head>
<title>border-radius</title>
<style>
div {
border: 2px solid red;
margin-top: 10px;
padding: 10px;
}

.topleft {
border-top-left-radius: 25px;
}

.topright {
border-top-right-radius: 25px;
}

.bottomleft {
border-bottom-left-radius: 25px;
}

.bottomright {
border-bottom-right-radius: 25px;
}

.all {
border-radius: 25px;
}
</style>
</head>

<body>

<div class="topleft">
Here Applied border-top-left-radius:25px
</div>

<div class="topright">
Here Applied border-top-right-radius:25px;
</div>

<div class="bottomleft">
Here Applied border-bottom-left-radius:25px;
</div>

<div class="bottomright">
Here Applied border-bottom-right-radius:25px;
</div>

<div class="all">
Here Applied border-radius: 25px;
</div>

</body>

</html>

Dalam tutorial CSS3 yang pertama ini saya akan mengajarkan tentang cara membuat efek sudut melengkung dengan memakai properti border-radius.
Saya juga akan membuat sudut elips denga properti border-radius ini.

Cara Membuat Sudut Melengkung dengan CSS

Sudut lengkung digunakan untuk menambahkan sudut berwarna khusus untuk body atau teks dengan menggunakan properti border-radius.

Sript kode sederhana untuk membuat sudut lengkung adalah sebagai berikut:
#rcorners {
border-radius: 60px/15px;
background: #FF0000;
padding: 20px;
width: 200px;
height: 150px;
}

Properti border-radius CSS3

Properti border-radius digunakan untuk membuat sudut lengkung pada elemen.
Kita dapat membuat sudut lengkung seperti:
1. Sudut lengkung untuk sebuah elemen dengan warna background tertentu.
2. Sudut lengkung untuk sebuah elemen dengan border
3. Sudut lengkung untuk sebuah elemen dengan background image

Berikut adalah contoh kodenya:

<!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>

<p>The border-radius property allows you to add rounded corners to elements.</p>
<p>Rounded corners for an element with a specified background color:</p>
<p id="rcorners1">Rounded corners!</p>
<p>Rounded corners for an element with a border:</p>
<p id="rcorners2">Rounded corners!</p>
<p>Rounded corners for an element with a background image:</p>
<p id="rcorners3">Rounded corners!</p>

</body>
</html>

Properti border-radius sebenarnya properti shorthand untuk properti border-top-left-radius, border-top-right-radius, border-bottom-right-radius dan border-bottom-left-radius.

Ingat properti shorthand itu adalah properti singkat dari gabungan properti lain.

Properti Each Corner

Dengan properti Each Corner Kita dapat menentukan setiap sudut properti.

Pentuan nilai properti each corner

Jika Anda hanya menentukan satu nilai untuk properti border-radius, nilai radius ini akan diterapkan ke semua (4) sudut.

Namun, Anda dapat menentukan nilai setiap sudut secara terpisah jika Anda inginkan. Berikut adalah aturan:

Empat nilai: nilai pertama berlaku untuk atas-kiri, nilai kedua berlaku untuk kanan, nilai ketiga berlaku ke bawah-kanan, dan nilai keempat berlaku ke bawah sudut kiri bawah.

Tiga nilai: nilai pertama berlaku untuk atas-kiri, nilai kedua berlaku untuk bagian kanan dan bawah-kiri, dan nilai ketiga berlaku ke kanan bawah

Dua nilai: nilai pertama berlaku untuk atas-kiri dan sudut kanan bawah, dan nilai kedua berlaku untuk bagian kanan dan bawah sudut kiri bawah

Satu nilai: semua empat sudut dibulatkan sama.

Aturan nilai pada properti each corner ini berbeda dengan perhitungan nilai pada padding dan margin, pada padding perhitungan nya seperti arah jam, namun pada each corner ini perhitungannya secara silang.

Contoh

 <!DOCTYPE html>
<html>
<head>
<style>
#rcorners4 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners5 {
border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners6 {
border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>

<p>Four values - border-radius: 15px 50px 30px 5px:</p>
<p id="rcorners4"></p>

<p>Three values - border-radius: 15px 50px 30px:</p>
<p id="rcorners5"></p>

<p>Two values - border-radius: 15px 50px:</p>
<p id="rcorners6"></p>

</body>
</html>

Anda juga dapat membuat sudut elips dengan properti border-radius seperti berikut ini.

<!DOCTYPE html>
<html>
<head>
<style>
#rcorners7 {
border-radius: 50px/15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners8 {
border-radius: 15px/50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners9 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>

<p>Elliptical border - border-radius: 50px/15px:</p>
<p id="rcorners7"></p>

<p>Elliptical border - border-radius: 15px/50px:</p>
<p id="rcorners8"></p>

<p>Ellipse border - border-radius: 50%:</p>
<p id="rcorners9"></p>

</body>
</html>

Sampai disini kita sudah selesai mempelajari cara membuat sudut Melengkung Rounded Corner css.
Semoga bermanfaat.

Get real time updates directly on you device, subscribe now.

loading...

Ingin Berkomentar?

×
Lewat ke baris perkakas