Lewati ke konten utama
iotools.cloudiotools.cloud

Generator Outline CSS

API reference

Buat deklarasi CSS outline dan outline-offset — lebar, gaya, warna, dan jarak — dengan pratinjau langsung, plus aturan :focus-visible siap pakai untuk cincin fokus yang mudah diakses. Salin CSS dan HTML-nya.

Input

Hanya digunakan untuk pratinjau dan cuplikan HTML.

Jarak antara tepi elemen dan garis outline. Nilai negatif menggambar outline di dalam.

Browser modern membuat outline mengikuti sudut.

Membatasi aturan ke fokus keyboard, pola yang direkomendasikan untuk cincin fokus.

Output

Kotak yang diberi outline akan muncul di sini.

Deklarasi outline
CSS
HTML
Apakah ini membantu?

Cara lain menggunakan alat ini

REST API

curl -X POST https://api.iotools.cloud/v1/tool/css-outline-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{}'

Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.

Tanyakan ke agen AI

Use the IOTools `css-outline-generator` tool (CSS Outline Generator) on this input:

YOUR_INPUT_HERE

Tempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.

Widget sematan

<iframe
  src="https://iotools.cloud/embed/css-outline-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Generator Outline CSS — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.

Biaya per panggilan API/MCPMulai dari 5 kredit
Butuh kredit lebih?Lihat harga

Juga tersedia melalui

IntegrasiEkstensi browserEkstensi VS Code

Panduan

Properti CSS outline menggambar garis di sekeliling elemen tanpa mengubah ukurannya atau mendorong elemen di sekitarnya, dan inilah yang membedakannya dari border. Properti ini menjadi dasar cincin fokus keyboard. Generator ini memungkinkan Anda mengatur lebar, gaya, warna, dan outline-offset dengan pratinjau langsung, lalu menyalin CSS-nya.

Cara menggunakan

  1. Atur lebar, gaya, dan warna. Ada delapan gaya: solid, dashed, dotted, double, groove, ridge, inset, dan outset.
  2. Sesuaikan offset. outline-offset menentukan jarak antara elemen dan garis. Nilai negatif menggambar outline di dalam tepi elemen.
  3. Pilih radius sudut. Browser modern membuat outline mengikuti sudut yang membulat.
  4. Aktifkan "Tampilkan hanya di :focus-visible" untuk mendapatkan aturan yang hanya muncul saat fokus keyboard, pola yang direkomendasikan untuk cincin fokus.
  5. Salin hasilnya: deklarasinya, aturan CSS lengkap, dan cuplikan HTML yang cocok.

Outline vs. border

  • Outline tidak memakan ruang tata letak, jadi mengubahnya tidak pernah menggeser halaman.
  • Outline bisa digeser menjauh dari elemen; border tidak bisa.
  • Outline selalu sama di semua sisi, dan mengikuti border-radius di browser modern.

Tips aksesibilitas

  • Jangan pernah menulis outline: none tanpa pengganti yang terlihat. Pengguna keyboard bergantung pada cincin fokus.
  • Usahakan rasio kontras 3:1 antara warna outline dan latar belakang di sekitarnya.
  • Outline 2–3px dengan offset 2px adalah default yang jelas dan banyak dipakai.

Untuk bingkai dekoratif, coba Generator Gaya Border CSS. Untuk efek cahaya lembut, lihat Generator Box Shadow CSS.

Privasi

Semuanya berjalan di browser Anda. Pengaturan Anda tidak pernah diunggah.

outlineoutline-offsetfocus ringfocus-visiblecss outlineaccessibilityborder alternative

Suka alat-alatnya? Hilangkan iklannya.

Satu kali pembayaran menghapus semua iklan dari akun Anda, selamanya. Tanpa langganan, tanpa pelacakan.

Hapus iklan