CSS Border Properties

CSS Border Properties menjadi satu unsur yang hampir tidak pernah lepas dari css box model. Border properties banyak dmanfaatkan untuk memperindah box, membedakan sebuah box dengan box lain serta memperjelas batas sebuah box. Ada tiga properti css border yang masing-masing mengatur ketebalan border, warna border dan style border. Masing masing dapat digunakan di ke-empat sisi box (top, right, bottom dan left).
  • border-width property :
    border-width property berfungsi untuk mengatur ketebalan border. Ada beberapa satuan Value/nilai yang bisa dipergunakan seperti pixel, pt, em, thick, thin, medium dll.
  • border-color property :
    border-color property berfungsi untuk mengatur warna border. Warna yang bisa digunakan adalah dalam bentuk hexadecimal/hex, color names, rgb, rgba, hsl, hsla, none, inherit dll.
  • border-color style :
    Border style property selain digunakan sebagai pembatas box, style yang beraneka-ragam juga banyak dimanfaatkan untuk menciptakan keindahan. Beberapa value yang digunakan adalah: ridge, solid, dotted, dll.
Border Properties
value
contoh
Cara Penulisan Border
border-width
px
border-width: 10px;
border-top-width:...px;
em
border-top-width: 1.4em;
border-top-style: solid;
%
border-width: 1%;
border-top-color: red;
medium
border-width: medium;
thin
border-bottom-width:thin;
border-right-width: 2.5em;
thick
border-right-width: thick;
border-right-style: dotted;
border-style
dashed
border-style: dashed;
border-right-color: #f00;
dotted
border-left-style: dotted;
double
border-right-style: double;
border-bottom-width: 22pt;
groove
border-style: groove;
border-bottom-style: ridge;
hidden
border-style: hidden;
border-bottom-color: rgb(180,0,0);
inherit
border-bottom-style: inherit;
inset
border: inset 20px blue;
border-left-width: thick;
none
border-style: none;
border-left-style: double;
ridge
border-top: ridge 8px;
border-left-color: rgba(90,0,190,0.2);
border-color
hex
border-color: #fff;
color names
border-top-color: green;
border: solid red 30px;
rgb
border-left-color: rgb(0,100,100);
border: 12px double orange;
rgba
border:solid rgba(0,0,0,0.3) 10px;
border: 2em #000 ridge;
hsl
border-left: solid hsl(100,50%,25%);
hsla
border:double 2em hsla(45,20%,85%,0.6);
border: none; border: inherit;
Di bawah ini telah disertakan beberapa box dengan berbahgai macam border property. Edit dan lakukan beberapa perubahan pada background dan yang lain untuk lebih memahami tentang kode css.
Please click the button to display. Continue with editing code and click to see the results!

Tidak ada komentar:

Posting Komentar

My ProfileC l o s e

FollowerC l o s e