[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-cats-ngidenet":3,"blog-detail-ngidenet-border-css":20},{"items":4},[5,9,13,17],{"name":6,"slug":7,"count":8},"Digital Marketing","digital-marketing",41,{"name":10,"slug":11,"count":12},"Programming","programming",56,{"name":14,"slug":15,"count":16},"Tips","tips",75,{"name":18,"slug":19,"count":8},"Web Development","web-development",{"id":21,"slug":22,"title":23,"short_text":24,"excerpt":24,"cover":25,"cover_image":25,"cover_alt_text":25,"category":18,"tags":26,"published_at":27,"created_at":28,"full_text":29,"meta_title":25,"meta_description":30,"faqs":31,"images":32,"views_count":33},468,"border-css","Tutorial CSS : Membuat Border CSS","CSS border berfungsi untuk memberikan border kedalam sebuah elemen. Dengan border kita bisa menentukan style, lebar, dan warna dari border. Cara menggunakannya adalah dengan property: border Format va",null,[],"2021-10-21T16:00:00Z","2026-07-14T04:39:42.069731Z","\u003Cp>CSS border berfungsi untuk memberikan border kedalam sebuah elemen. Dengan border kita bisa menentukan style, lebar, dan warna dari border.\u003C\u002Fp>\u003Cp>Cara menggunakannya adalah dengan property: \u003Ccode>border\u003C\u002Fcode>\u003C\u002Fp>\u003Cp>Format value misalnya \u003Ccode>1px solid #000\u003C\u002Fcode> dimana \u003Cstrong>1px\u003C\u002Fstrong> adalah ketebalan border, \u003Cstrong>solid\u003C\u002Fstrong> adalah type bordernya, dan \u003Cstrong>#000\u003C\u002Fstrong> adalah warna border.\u003C\u002Fp>\u003Cp>Langsung saja liat contoh di bawah ini:\u003C\u002Fp>\u003Cpre>\u003Ccode>div {\n  border: 1px solid #000\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Hasil dari kode di atas kira-kira menjadi seperti dibawah ini:\u003C\u002Fp>\u003Cp>Div dengan: border: 1px solid #000\u003C\u002Fp>\u003Cp>Ada beberapa pilihan \u003Ccode>border-style\u003C\u002Fcode> yang bisa kamu coba:\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>dotted\u003C\u002Fstrong> - Mendifinisikan dotted border\u003C\u002Fli>\u003Cli>\u003Cstrong>dashed\u003C\u002Fstrong> - Mendifinisikan dashed border\u003C\u002Fli>\u003Cli>\u003Cstrong>solid\u003C\u002Fstrong> - Mendifinisikan solid border\u003C\u002Fli>\u003Cli>\u003Cstrong>double\u003C\u002Fstrong> - Mendifinisikan double border\u003C\u002Fli>\u003Cli>\u003Cstrong>groove\u003C\u002Fstrong> - Mendifinisikan 3D grooved border. Efeknya tergantung border-color value\u003C\u002Fli>\u003Cli>\u003Cstrong>ridge\u003C\u002Fstrong> - Mendifinisikan3D ridged border. Efeknya tergantung border-color value\u003C\u002Fli>\u003Cli>\u003Cstrong>inset\u003C\u002Fstrong> - Mendifinisikan 3D inset border. Efeknya tergantung border-color value\u003C\u002Fli>\u003Cli>\u003Cstrong>outset\u003C\u002Fstrong> - Mendifinisikan 3D outset border. Efeknya tergantungborder-color value\u003C\u002Fli>\u003Cli>\u003Cstrong>none\u003C\u002Fstrong> - Mendifinisikan no border\u003C\u002Fli>\u003Cli>\u003Cstrong>hidden\u003C\u002Fstrong> - Mendifinisikan hidden\u003C\u002Fli>\u003C\u002Ful>\u003Cp>Contoh dari masing-masing \u003Ccode>border-style\u003C\u002Fcode>:\u003C\u002Fp>\u003Cpre>\u003Ccode>p.dotted {border-style: dotted;}\np.dashed {border-style: dashed;}\np.solid {border-style: solid;}\np.double {border-style: double;}\np.groove {border-style: groove;}\np.ridge {border-style: ridge;}\np.inset {border-style: inset;}\np.outset {border-style: outset;}\np.none {border-style: none;}\np.hidden {border-style: hidden;}\np.mix {border-style: dotted dashed solid double;}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Cstrong>Hasilnya adalah:\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>A dotted border.\u003C\u002Fp>\u003Cp>A dashed border.\u003C\u002Fp>\u003Cp>A solid border.\u003C\u002Fp>\u003Cp>A double border.\u003C\u002Fp>\u003Cp>A groove border. The effect depends on the border-color value.\u003C\u002Fp>\u003Cp>A ridge border. The effect depends on the border-color value.\u003C\u002Fp>\u003Cp>An inset border. The effect depends on the border-color value.\u003C\u002Fp>\u003Cp>An outset border. The effect depends on the border-color value.\u003C\u002Fp>\u003Cp>No border.\u003C\u002Fp>\u003Cp>A hidden border.\u003C\u002Fp>\u003Cp>A mixed border.\u003C\u002Fp>\u003Cp>Nah itulah pembahasan tentang properti border dalam css. Semoga artikel ini bisa membuat kamu lebih mengerti tentang border dalam css.\u003C\u002Fp>\u003Cp>Kunjungi artikel tentang css lainnya di link berikut: Belajar CSS\u003C\u002Fp>","CSS border berfungsi untuk memberikan border kedalam sebuah elemen. Dengan border kita bisa menentukan style, lebar, dan warna dari border. Cara menggunakannya ",[],[],0]