Blog ini akan membahas :

• Apa itu Outline Radius?
• Bagaimana Cara Menerapkan Efek Outline Radius pada Elemen HTML?

Apa itu Outline Radius?

“ garis besar ” properti digunakan untuk membentuk garis besar elemen, tetapi tidak dapat diimplementasikan secara langsung. Oleh karena itu, metode alternatif untuk mengaplikasikan efek radius pada sebuah outline adalah dengan menggunakan “ radius perbatasan ” Properti CSS. Ini menentukan sudut bulat untuk garis besar.

Bagaimana Cara Menerapkan Efek Outline Radius pada Elemen HTML?

Untuk menggunakan properti radius garis besar, ikuti instruksi yang diberikan.

Langkah 1: Sematkan Tajuk

Awalnya, sematkan tajuk dengan menggunakan tag tajuk apa saja dari “

' ke '

”. Misalnya, kami telah menggunakan '

' dan '

” untuk menyematkan dua judul berbeda pada dokumen HTML.

Langkah 2: Tambahkan Kontainer div Pertama

Setelah itu, tambahkan wadah menggunakan tombol “

” tag. Juga, masukkan “ kelas ” atribut dan tentukan nama untuk kelas sesuai pilihan Anda.

---

---

Langkah 3: Buat Kontainer div Kedua

Buat yang lain ' div ” wadah dengan mengikuti prosedur yang sama:

< h1 gaya = 'warna: rgb(48, 10, 218)' > Linuxint LTD Inggris < / h1 >

< h2 >

Contoh berbeda untuk border-radius untuk membuat sudut-sudut lingkaran garis besar.

< / h2 >

< div kelas = 'kotak1-div' >

Linuxhint menyediakan konten terbaik dan terunik bagi para penggunanya.

< / div >

< div kelas = 'kotak2-div' >

Ia bekerja pada beberapa kategori.

< / div >

Output dari kode di atas ditunjukkan di bawah ini:

Langkah 4: Tetapkan Garis Besar Wadah Pertama

Akses wadah pertama dengan menggunakan tombol “ .box1-div ' kelas di mana ' . ” adalah pemilih untuk mengakses kelas:

.box1-div {

garis besar : padat ;

lebar : 300px ;

lapisan : 15px ;

batas : 25px ;

}

Kemudian, terapkan properti CSS yang tercantum di bawah ini:

• “ garis besar ” properti digunakan untuk menambahkan garis besar di sekitar elemen. Misalnya, nilainya ditetapkan sebagai “ padat ”.
• “ lebar ” menentukan ukuran elemen secara horizontal.
• “ lapisan ” digunakan untuk mengalokasikan ruang di sekitar konten elemen.
• “ batas ” tentukan ruang di sisi luar batas elemen.

Langkah 5: Tetapkan Garis Besar Wadah Kedua

Sekarang, akses elemen kedua dengan bantuan kelasnya masing-masing “ .box2-div ”:

.box2-div {

garis besar : padat ;

radius perbatasan : 20px ;

lebar : 300px ;

lapisan : 15px ;

batas : 25px ;

}

Terapkan properti CSS “ radius perbatasan ” untuk menentukan jari-jari elemen. Properti ini memungkinkan Anda untuk menambahkan sudut membulat di sekitar elemen:

Terlihat bahwa kita telah berhasil menambahkan efek radius garis besar pada elemen HTML.

Kesimpulan

“ garis besar-radius ' tidak lagi tersedia. Pengguna dapat menerapkan properti radius garis besar dengan bantuan properti 'garis besar' dan 'radius batas' CSS. “ garis besar ” menambahkan garis luar di sekitar elemen, dan “ radius perbatasan ” secara khusus digunakan untuk menata garis luar. Posting ini telah menunjukkan petunjuk untuk menambahkan efek radius garis luar di sekitar elemen dalam HTML.