Luncur Luncur CSS

Luncur Luncur CSS

Melalui CSS border-radius Properti, dapat memungkinkan gaya 'cornerRadius' untuk setiap elemen.

Properti border-radius CSS

CSS border-radius Atribut menentukan radius sudut elemen.

Petunjuk:Anda dapat menggunakan atribut ini untuk menambah lingkaran busur pada elemen!

Ada tiga contoh ini:

1. Elemen dengan warna latar belakang yang ditentukan:

Lingkaran busur!

2. Elemen dengan garis busur:

Lingkaran busur!

3. Elemen dengan gambar latar belakang yang berbusur:

Lingkaran busur!

Ini adalah kode:

Contoh

#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; 
}

Coba sendiri

Petunjuk:border-radius Atribut sebenarnya adalah atribut singkat dari berikut ini:

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

CSS border-radius - tentukan setiap sudut

border-radius Atribut dapat menerima satu hingga empat nilai. Aturan seperti berikut:

Empat nilai - border-radius: 15px 50px 30px 5px;（Dengan urutan yang berikutnya: sudut kiri atas, sudut kanan atas, sudut kanan bawah, sudut kiri bawah):

Tiga nilai - border-radius: 15px 50px 30px;（Nilai pertama digunakan untuk sudut kiri atas, nilai kedua digunakan untuk sudut kanan atas dan kiri bawah, nilai ketiga untuk sudut kanan bawah):

Dua nilai - border-radius: 15px 50px;（Nilai pertama digunakan untuk sudut kiri atas dan kanan bawah, nilai kedua digunakan untuk sudut kanan atas dan kiri bawah):

Satu nilai - border-radius: 15px;（Nilai ini digunakan untuk empat sudut, lingkaran busur sama):

Ini adalah kode:

Contoh

#rcorners1 {
  border-radius: 15px 50px 30px 5px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 15px 50px 30px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 15px 50px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners4 {
  border-radius: 15px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

Coba sendiri

Anda juga dapat membuat sudut lingkaran elips:

Contoh

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

Coba sendiri

Atribut lingkaran busur CSS

Atribut Deskripsi
border-radius Diperuntukan untuk mengatur properti singkat border-*-*-radius untuk empat atribut border radius.
border-top-left-radius Mendefinisikan bentuk sisi kiri atas.
border-top-right-radius Mendefinisikan bentuk sisi kanan atas.
border-bottom-right-radius Mendefinisikan bentuk sisi kanan bawah.
border-bottom-left-radius Mendefinisikan bentuk sisi kiri bawah.