Artık web sitelerimizi, CSS kodları ile kolay ve hızlı bir şekilde geliştirebiliyoruz. Dolayısı ile, elbette bu CSS kodlarının en önemli konularından birisi de elbette; kenarlar olsa gerek. Elbette kendini CSS konusunda geliştirmiş bir kişi, kenarların tamamını belki de ezbere biliyordur. Fakat ben, kendini CSS konusunda yeni yeni geliştiren kişilerin CSS'deki kenarlar hakkında bilgilerinin olmayacağını düşünerek, bu yazıyı yazmak istedim. En azından bu yazımın, bu konuda herhangi bir bilgisi olmayan ziyaretçilerimize yararlı olacağını düşünüyorum.

Noktalardan oluşan kenarlar hazırlamak için;

border:1px dotted #ffffff; (Her köşe)
border-right:1px dotted #ffffff; (Sağ köşe)
border-left:1px dotted #ffffff; (Sol köşe)
border-top:1px dotted #ffffff; (Üst Köşe)
border-bottom:1px dotted #ffffff; (Alt köşe)

Düz çizgilerden oluşan kenarlar hazırlamak için;

border:1px solid #ffffff; (Her köşe)
border-right:1px solid #ffffff; (Sağ köşe)
border-left:1px solid #ffffff; (Sol köşe)
border-top:1px solid #ffffff; (Üst Köşe)
border-bottom:1px solid #ffffff; (Alt köşe)

Aralıklı noktalardan oluşan kenarlar oluşturmak için;

border:1px dashed #ffffff; (Her köşe)
border-right:1px dashed #ffffff; (Sağ köşe)
border-left:1px dashed #ffffff; (Sol köşe)
border-top:1px dashed #ffffff; (Üst Köşe)
border-bottom:1px dashed #ffffff; (Alt köşe)

Çerçeve şeklinde kenarlar oluşturmak için;

border-style: double; border-color: white;

Sol ve Üst kısımdan 3 boyutluluk kazanmış kenarlar kullanmak için;

border-style: groove; border-color: white;

Sağ ve Alt kısımdan 3 boyutluluk kazanmış kenarlar kullanmak için;

border-style: ridge; border-color: white;

Sol ve Üst kısımdan 3 boyutluluk kazanmış daha geniş kenarlar yapmak için;

border-style: inset; border-color: white;

Sağ ve Alt 3 boyutluluk kazanmış daha geniş kenarlar yapmak için;

border-style: outset; border-color: white;

Kaynak: w3Schools