CSS3 Border Kullanımı

CSS kenarlık kullanımı özellikleri, bir öğenin kenarlığının stilini, genişliğini ve rengini belirtmenize olanak tanır. Bu nedenle HTML ile oluşturacağınız web sayfalarında yer alacak olan bazı etiketlere yada CSS border kullanımı sayesinde güzel bir görünüş katabilirsiniz.

 

 

Başlıklar
  1. border-style Kullanımı
  2. border-width Kullanımı
  3. border-color Kullanımı
  4. border-radius Kullanımı

border-style Kullanımı

CSS ‘te kenarlık ekleyeceğiniz nesneyi seçip istediğiniz farklı farklı kenar özellikleri ekleyebilmek mümkündür.Bunun için ise ister kesik çizgi, düz çizgi, çift çizgi gibi özelliklere sahip kullanım çeşitleri bulunmaktadır. Bunlar :

p {border-style: dotted;}
p {border-style: dashed;}
p {border-style: solid;}
p {border-style: double;}
p {border-style: groove;}
p {border-style: ridge;}
p {border-style: inset;}
p {border-style: outset;}
p {border-style: none;}
p {border-style: hidden;}
p {border-style: dotted dashed solid double;}

 

olarak karşımıza gelmektedir. Yukarıda yer alan CSS Kenarlık Çeşitlerine göz atacak olur isek hepsini denediğimizde farklı farklı sonuçlar’a ulaşmamıza rağmen en alt satırda yer alan kod satırında bir farklılık görebiliriz. Bunun anlamı ise en üst (top), sağ (right), en alt (bottom), sol (left) kenarlıkların her birine farklı bir CSS kenarlık çeşidi ekleyebilme’ye olanak sağlamaktadır.

 

p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}

 

Dilerseniz her bir kenarlığa CSS tarafında kısmını yazarak farklı CSS kenarlık çeşitleri tanımlamakta mümkündür.

 

 

border-width Kullanımı

border-width özelliği dört kenarlık genişliğini belirtir. Genişlik, belirli bir boyut olarak (px, pt, cm, em, vb.) Veya önceden tanımlanmış üç değerden biri kullanılarak ayarlanabilir: ince, orta veya kalın. Kenarlık genişliği özelliği bir ile dört arasında değerlere sahip olabilir (üst sınır, sağ kenarlık, alt kenarlık ve sol kenarlık için).

p{
border-style: solid;
border-width: 5px;
}

 

Yukarıda yer alan border-width özelliğinde ise her taraftan eşit bir şekilde 5px olmasını istedik fakat aşağıda yer alan kod satırında ise :

p{
border-style: solid;
border-width: 2px 10px 4px 20px;
}

 

Top, right, bottom ve right olarak ayarlamalar yapmış bulunuyoruz.

 

 

border-color Kullanımı

border-color özelliği dört sınırın rengini ayarlamak için kullanılır. Kenarlık rengi özelliği bir ile dört arasında değerlere sahip olabilir (üst kenarlık, sağ kenarlık, alt kenarlık ve sol kenarlık için).

  • isim – “kırmızı” gibi bir renk adı belirtin
  • Hex – “# ff0000” gibi bir hex değeri belirtin
  • RGB – “rgb (255,0,0)” gibi bir RGB değeri belirtin

Kenarlık rengi ayarlanmamışsa, öğenin rengini miras alır.

 

p {
border-style: solid;
border-color: red;
}

 

Yukarıda yer alan kod satırında ise bizler tüm kenarlığın rengini kırmızı olarak ayarlamış bulunduk.  Fakat her bir kenarlık için farklı bir renk atamak istiyor isek :

p {
border-style: solid;
border-color: red green blue yellow;
}

Bu sefer ise bizler tekrardan en üst, sağ, alt ve sol taraf olarak her bir kenarlık için farklı renkler tanımlamış oluyoruz.

 

 

border-radius Kullanımı

borde-radius özelliği ise bir öğeye yuvarlanmış kenarlıklar eklemek için kullanılır :

p {
border: 2px solid red;
border-radius: 5px;
}

Yukarıda yer alan kod satırında ise bizler CSS kenarlık ekleme işlemimizi 2 piksel ve solid türünde kırmızı bir kenarlık yapmasını söylemişiz. Daha sonrasında ise bu kenarlık için her taraftan 5 piksel olarak kenarlarının yuvarlak olmasını istemiş bulunuyoruz.


] }

Yorum yapın