CSS Border Generator

CSS Border Generator merupakan sebuah online tool yang digunakan untuk menghasilkan styling CSS border.

Border style

Field ini mengatur border style yang akan digunakan untuk membuat border. Ada empat bagian border yang bisa kamu pilih border style-nya. Bagian yang dimaksud:

• Top: mengatur border style bagian atas
• Right: mengatur border style bagian kanan
• Bottom: mengatur border style bagian bawah
• Left: mengatur border style bagian kiri

Untuk masing-masing bagian, ada beberapa pilihan border style yang dapat kamu pilih. Border style yang tersedia saat ini adalah sebagai berikut:

• none
• solid
• dotted
• dashed
• double
• groove
• ridge
• inset
• outset
• hidden

Secara default masing-masing bagian memiliki nilai:

• Top: solid
• Right: solid
• Bottom: solid
• Left: solid

Border color

Field ini mengatur warna dari border yang akan di-generate. Ada empat bagian dari border yang bisa kamu atur warnanya. Bagian yang dimaksud:

• Top: mengatur border color bagian atas
• Right: mengatur border color bagian kanan
• Bottom: mengatur border color bagian bawah
• Left: mengatur border color bagian kiri

Secara default masing-masing bagian memiliki warna sebagai berikut:

• Top: rgb(0, 0, 0) atau #000000
• Right: rgb(0, 0, 0) atau #000000
• Bottom: rgb(0, 0, 0) atau #000000
• Left: rgb(0, 0, 0) atau #000000

Border width

Field ini dapat kamu gunakan untuk mengatur ketebalan dari border. Ada empat bagian yang bisa kamu atur:

• Top: mengatur border width bagian atas
• Right: mengatur border width bagian kanan
• Bottom: mengatur border width bagian bawah
• Left: mengatur border width bagian kiri

Perlu diingat, semua nilai dari bagian border width ini memiliki satuan piksel (px).

Secara default masing-masing bagian border width memiliki nilai sebagai berikut:

• Top: 8
• Right: 8
• Bottom: 8
• Left: 8

Border radius

Field border radius ini mengatur seberapa besar nilai radius dari sudut border. Ada empat bagian dari border yang bisa kamu atur radiusnya. Bagian yang dimaksud adalah sebagai berikut:

• Top left: mengatur border radius bagian sudut kiri atas
• Top right: mengatur border radius bagian sudut kanan atas
• Bottom right: mengatur border radius bagian sudut kanan bawah
• Bottom left: mengatur border radius bagian sudut kiri bawah

Semua nilai bagian untuk border radius ini memiliki satuan piksel (px).

Secara default masing-masing bagian border radius memiliki nilai sebagai berikut:

• Top left: 2
• Top right: 2
• Bottom right: 2
• Bottom left: 2

Generate

Setelah selesai menentukan semua parameter, selanjutnya kamu hanya perlu menekan tombol Generate untuk memulai proses.

Preview

Contoh tampilan dari border yang telah di-generate kemudian ditampilkan di sini sesuai dengan parameter yang telah kamu tentukan sebelumnya.

Code

Selain contoh tampilan, ditampilkan juga contoh CSS yang digunakan untuk membuat contoh tampilan tersebut. CSS ini sesuai hasil dari generate dengan parameter yang telah kamu tentukan sebelumnya. Kalau dirasa perlu, kamu bisa menyalinnya.