Blog

Kupas Tuntas Border CSS - Part 1

 

Kupas Tuntas Border CSS - Part 1

CSS     5 bulan yang lalu


Dengan border CSS kita bisa membuat garis tepi pada objek HTML. Yuk kita kupas lebih lengkap tentang border...

CSS Rounded Corners

Properti border-radius pada CSS

Properti border-radius CSS mendefinisikan radius sudut suatu elemen.

Tips: Properti ini memungkinkan Anda untuk menambahkan batas membulat ke elemen!

Berikut tiga contoh dalam penggunaannya:

1. Sudut dibulatkan untuk elemen dengan warna latar belakang yang ditentukan:

.radius-corners1 {
    border-radius: 25px;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

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

.radius-corners3 {
    border-radius: 25px;
    background: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

Tips: Properti border-radius sebenarnya adalah singkatan dari properti border-top-left-radiusborder-top-right-radiusborder-bottom-right-radius dan border-bottom-left-radius.

CSS border-radius - Khusus pada sudut tertentu

Properti border-radius dapat memiliki satu hingga empat nilai. Berikut aturannya:

Empat nilai - border-radius: 15px 50px 30px 5px; (Nilai pertama berlaku untuk sudut kiri atas, nilai kedua berlaku untuk sudut kanan atas, nilai ketiga berlaku untuk sudut kanan bawah, dan nilai keempat berlaku untuk sudut kiri bawah).

Tiga nilai - batas-radius: 15px 50px 30px; (Nilai pertama berlaku untuk sudut kiri atas, nilai kedua berlaku untuk sudut kanan atas dan kiri bawah, dan nilai ketiga berlaku untuk sudut kanan bawah).

Dua nilai - batas-radius: 15px 50px; (Nilai pertama berlaku untuk sudut kiri atas dan kanan bawah, dan nilai kedua berlaku untuk sudut kanan atas dan kiri bawah).

Satu nilai - border-radius: 15px; (nilai berlaku untuk keempat sudut, yang dibulatkan sama.

Berikut contoh penggunaanya:

.radiuscorners1 {
    border-radius: 15px 50px 30px 5px;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

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

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

.radiuscorners4 {
    border-radius: 15px;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

Anda juga bisa membuat sudut elips:

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

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

.radiuscorners3 {
    border-radius: 50%;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px;
}

CSS Rounded Corners Properties

Property Description
border-radius Sebuah properti singkatan untuk mengatur semua empat perbatasan - * - * - sifat radius
border-top-left-radius Definisikan bentuk batas sudut kiri atas
border-top-right-radius Menentukan bentuk perbatasan sudut kanan atas
border-bottom-right-radius Definisikan bentuk batas sudut kanan bawah
border-bottom-left-radius Definisikan bentuk perbatasan sudut kiri bawah