Luncur Buram CSS

Luncur Buram CSS

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

Properti border-radius CSS

CSS border-radius Atribut menentukan jari-jari sudut elemen.

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

Disini ada tiga contoh:

1. Elemen dengan warna latar belakang yang ditentukan:

Lingkaran tajam!

2. Elemen dengan garis bingkai yang berlingkaran:

Lingkaran tajam!

3. Elemen dengan gambar latar belakang yang berlingkaran:

Lingkaran tajam!

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;（Secara berturut-turut digunakan untuk: 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 digunakan 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 tajam 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 tajam CSS

Atribut Deskripsi
border-radius Properti singkat untuk mengatur semua empat atribut border-*-*-radius.
border-top-left-radius Mendefinisikan bentuk border di pojok kiri atas.
border-top-right-radius Mendefinisikan bentuk border di pojok kanan atas.
border-bottom-right-radius Mendefinisikan bentuk border di pojok kanan bawah.
border-bottom-left-radius Mendefinisikan bentuk border di pojok kiri bawah.