Generator Garis Luar

Buat efek garis luar CSS secara visual dengan generator garis luar gratis kami. Sesuaikan lebar, gaya, warna, dan offset garis luar dengan kontrol interaktif dan lihat hasilnya secara langsung. Bandingkan rendering garis luar vs border berdampingan dengan kontrol independen untuk masing-masing. Termasuk preset lebar/offset, pengaturan ukuran elemen dan radius border, tabel perbandingan lengkap perbedaan garis luar vs border, dan salin CSS sekali klik. Sempurna untuk indikator fokus, token sistem desain, pengujian aksesibilitas, dan pembelajaran CSS. Sepenuhnya privat, 100% gratis, dan tanpa pendaftaran.

Outline Generator

Build CSS outline effects visually with width, style, colour, and offset controls. Compare outline vs border rendering side by side and copy the CSS with one click.

Element Text

Outline Width3px

Outline Style

Outline Colour

Outline Offset0px

Width (px)

Height (px)

Border Radius

BG Colour

Outline is drawn flush with the element border box edge.

Border is part of the box model and affects layout. It sits between padding and margin.

Outlineoffset: 0px

Outlined Element

BorderShow Border

Border

Outlined Element

Border Controls

Width (px)

Style

Border Colour

CSS Output

outline: 3px solid #3B82F6;
outline-offset: 0px;
border: 3px solid #10B981;

Outline vs Border - Key Differences

Box Model

Outline

Outline does NOT affect layout - it draws outside the border box and does not change element position or size.

Border

Border IS part of the box model - it adds to the element width/height and affects layout.

Per-Side Control

Outline

Outline cannot be set per-side - it applies uniformly around all four sides.

Border

Border can be set per-side using border-top, border-right, border-bottom, border-left.

Border Radius

Outline

Outline may NOT follow border-radius in all browsers (non-rounded corners).

Border

Border follows border-radius perfectly - rounded corners are supported everywhere.

Offset

Outline

Supports outline-offset (positive = outside, negative = inside) for positioning.

Border

Border does not support offset - it is always on the element edge.

Mengapa Menggunakan Generator Garis Luar Kami?

Pembuat Garis Luar Visual dengan Pratinjau Langsung: Generator garis luar memperbarui pratinjau dan keluaran CSS pada setiap perubahan - tanpa tombol yang harus ditekan. Sesuaikan lebar, gaya, warna, dan offset dengan slider, pemilih warna, dan tombol preset. Lihat efeknya pada elemen langsung secara waktu nyata.
Perbandingan Garis Luar vs Border: Lihat rendering garis luar dan border berdampingan dengan dimensi dan gaya elemen yang sama. Aktifkan/nonaktifkan border dan sesuaikan lebar, gaya, dan warna border secara independen. Tabel perbandingan menjelaskan perbedaan utama antara garis luar dan border dalam model kotak CSS.
100% Privat - Tanpa Unggahan: Semua pembuatan CSS terjadi secara lokal di browser Anda. Warna dan pengaturan Anda tidak pernah meninggalkan perangkat Anda dan tidak pernah dikirim ke server mana pun - aman untuk proyek klien dan desain proprietem.
Gratis & Tanpa Batas: Hasilkan efek garis luar tanpa batas tanpa pendaftaran, tanpa langganan, dan tanpa batas penggunaan. Generator garis luar sepenuhnya gratis selamanya tanpa iklan yang memblokir antarmuka.

Kasus Penggunaan Umum Generator Garis Luar

Penataan Komponen UI: Desainer UI menggunakan generator garis luar untuk membuat indikator fokus, status terpilih, dan efek hover untuk komponen interaktif. outline lebih disukai untuk cincin fokus karena tidak memengaruhi tata letak maupun menyebabkan reflow konten saat diaktifkan.
Pengembangan & Debugging CSS: Pengembang front-end menggunakan generator garis luar untuk bereksperimen dengan properti outline sebelum menulis CSS. Perbandingan berdampingan garis luar vs border membantu memahami bagaimana setiap properti berperilaku dalam model kotak dan mana yang digunakan untuk berbagai skenario.
Desain Indikator Fokus: Pengembang yang peduli aksesibilitas menggunakan generator garis luar untuk merancang indikator focus-visible khusus yang memenuhi persyaratan tampilan fokus WCAG 2.4.11. outline memungkinkan pembuatan cincin fokus yang terlihat yang tidak menggeser tata letak saat difokuskan.
Kepatuhan Aksesibilitas: Spesialis aksesibilitas menggunakan generator garis luar untuk menguji kontras dan visibilitas indikator fokus. Alat ini membantu memastikan warna garis luar memiliki kontras yang cukup terhadap latar belakang elemen untuk kepatuhan WCAG AA.
Pembelajaran & Pendidikan CSS: Pelajar dan pengajar CSS menggunakan generator garis luar untuk memahami perbedaan antara outline dan border. Perbandingan visual dan tabel catatan terperinci memudahkan memahami kapan menggunakan setiap properti.
Definisi Token Sistem Desain: Pengelola sistem desain menggunakan generator garis luar untuk mendefinisikan token garis luar yang konsisten untuk status fokus, status kesalahan, dan indikator seleksi. Alat ini membantu menstandardisasi lebar, gaya, dan warna garis luar di seluruh sistem desain.

Apa itu Outline CSS?

Properti CSS outline menggambar garis di sekitar elemen, di luar tepi border. Berbeda dengan border, outline tidak memakan ruang dalam model kotak - garis digambar di atas elemen tanpa memengaruhi ukuran atau posisinya. Ini membuat outline ideal untuk indikator fokus , status seleksi , dan debugging tata letak yang membutuhkan indikator terlihat tanpa mengganggu alur halaman.

Cara Kerja Generator Garis Luar Kami

Konfigurasikan garis luar: Atur lebar garis luar (0-20px), pilih gaya (solid, dashed, dotted, double, groove, ridge, inset, outset, atau none), dan pilih warna menggunakan pemilih warna atau input HEX. Pratinjau diperbarui secara instan.
Sesuaikan offset dan ukuran elemen: Gunakan slider outline-offset untuk memposisikan garis luar di luar (positif) atau di dalam (negatif) kotak border elemen. Sesuaikan lebar, tinggi, radius border, dan warna latar belakang elemen agar sesuai dengan kasus penggunaan Anda.
Bandingkan dengan border: Aktifkan/nonaktifkan pratinjau border. Sesuaikan lebar, gaya, dan warna border secara independen. Pratinjau berdampingan menunjukkan bagaimana garis luar dan border berbeda dalam rendering dan perilaku model kotak.
Salin CSS: Klik "Salin CSS" untuk menyalin deklarasi CSS lengkap untuk garis luar dan border, siap ditempelkan ke stylesheet Anda.

Garis Luar vs Border: Kapan Menggunakan Masing-masing

Indikator fokus (terutama dengan :focus-visible)
Debugging batas elemen tanpa memengaruhi tata letak
Indikator aksesibilitas yang tidak boleh menyebabkan reflow
Gaya cetak yang membutuhkan panduan terlihat
Batas elemen terlihat yang merupakan bagian dari desain
Penataan per sisi (border-top, border-right, dll.)
Status interaktif yang perubahan tata letaknya dapat diterima
Pemisah sel tabel dan komponen kartu

Aksesibilitas & Indikator Fokus

Kriteria keberhasilan 2.4.11 WCAG 2.2 (Tampilan Fokus) mengharuskan indikator fokus memiliki rasio kontras setidaknya 3:1 terhadap warna yang berdekatan dan setidaknya sebesar garis luar solid 2px. Properti CSS outline adalah cara yang direkomendasikan untuk mengimplementasikan indikator fokus karena tidak menyebabkan pergeseran tata letak saat fokus berubah. Generator garis luar kami membantu Anda merancang dan menguji indikator fokus berbasis outline yang memenuhi persyaratan WCAG.

Pertanyaan yang Sering Diajukan

Generator garis luar adalah alat visual yang membangun deklarasi CSS outline dari kontrol interaktif. Anda mengatur lebar, gaya, warna, dan offset garis luar, dan melihat hasilnya secara langsung pada elemen pratinjau. Generator garis luar kami juga membandingkan rendering garis luar vs border berdampingan.

outline tidak memengaruhi tata letak - garis digambar di luar kotak border tanpa mengubah posisi atau ukuran elemen. border adalah bagian dari model kotak. outline tidak dapat diatur per sisi dan mungkin tidak mengikuti border-radius. border mendukung kontrol per sisi dan mengikuti border-radius.

Gunakan outline untuk indikator fokus, debugging, dan indikator visual apa pun yang tidak boleh menyebabkan reflow tata letak. Gunakan border saat Anda memerlukan kontrol per sisi atau saat border merupakan bagian dari desain visual.

Generator garis luar mendukung lebar (0-20px), gaya (solid, dashed, dotted, double, groove, ridge, inset, outset, none), warna (warna HEX apa pun), dan offset (-10px hingga +20px). Ukuran elemen, radius border, dan warna latar belakang juga dapat dikonfigurasi.

Ya. Semua pembuatan CSS terjadi 100% di sisi klien di browser Anda. Warna, teks, dan pengaturan Anda tidak pernah dikirim ke server mana pun.

CSS outline-offset didukung di semua browser modern termasuk Chrome 1+, Firefox 1+, Safari 1.2+, Edge 12+, dan Opera 7+.

Di sebagian besar browser modern, outline TIDAK mengikuti border-radius. Garis luar tetap berbentuk persegi bahkan pada elemen dengan sudut membulat. Generator garis luar kami memungkinkan Anda melihat perilaku ini secara visual.

Ya. Generator garis luar 100% gratis tanpa pendaftaran, tanpa fitur premium, dan tanpa batas penggunaan. Hasilkan variasi garis luar tanpa batas tanpa batasan.