Border (Kenarlık)

border özelliğini kullanarak aynı anda dört kenarlığın genişliğini, stilini veya rengini ayarlayabilirsiniz. Söz dizimi şu şekildedir:

border: border-width border-style border-color;

• border-width: px, em, rem, % vb. bir uzunluk değeri alır.
• border-style: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset değerlerinden birini alır.
• border-color: Bir renk değeri alır.

Eğer her bir kenarı ayrı ayrı biçimlendirmek isterseniz şu özellikleri kullanabilirsiniz:

• border-top
• border-right
• border-bottom
• border-left

Eğer her bir kenarın kalınlık, stil ve renk değerlerini ayrı ayrı biçimlendirmek isterseniz şu özellikleri kullanabilirsiniz:

• border-top-width
• border-top-style
• border-top-color
• border-right-width
• border-right-style
• border-right-color
• border-bottom-width
• border-bottom-style
• border-bottom-color
• border-left-width
• border-left-style
• border-left-color

border-radius

Bir HTML ögesinin kenarlarını yumuşatmak için kullanılır. Dairesel köşeler oluşturmak için tek bir yarıçap veya eliptik köşeler yapmak için iki yarıçap ayarlayabilirsiniz.

/* Tek değer vermek, dört köşeyi bir yumuşatır. */
border-radius: 10px;

/* İlk değer, üst-sol ve alt-sağ köşeye; ikinci değer ise, üst-sağ ve alt-sol köşeye uygulanır. */
border-radius: 10px 5%;

/* İlk değer üst-sol, ikinci değer üst-sağ ve alt-sol, üçüncü değer ise alt-sağ köşeye uygulanır. */
border-radius: 2px 4px 2px;

/* Sırasıyla üst-sol, üst-sağ, alt-sağ ve alt-sol köşelere uygulanır. */
border-radius: 1px 0 3px 4px;

/* Global değerler */
border-radius: inherit;
border-radius: initial;
border-radius: unset;