Takip Edin

CSS

CSS’te Kenarlık Özelliği

CSS kenarlık özelliği, bir elemanın kenarlığının stilini, rengini ve genişliğini belirlemenizi sağlar.

border-style Özelliği

border-style özelliği, bir kutunun kenarlığının stilini ayarlar.

border-style özelliği, dotted, dashed, solid, double, groove, ridge, inset, outset, none ve hidden değerlerini alabilir.

Not: border-style özelliği ayarlanmadığı sürece diğer kenarlık özellikleri, herhangi bir etkiye sahip olmayacaktır.

border-width Özelliği

border-width özelliği, bir elemanın kenarlıklarının genişliğini ayarlamanızı sağlar. Genişlik, belirli bir boyut(cm, em, px, pt vb.) verilerek ayarlanabileceği gibi ince, orta veya kalın değerleri verilerek te ayarlanabilir.

border-color Özelliği

border-color özelliği, bir elemanı çevreleyen kenarlığın rengini ayarlamak için kullanılır.

Renk; renk adı, hex, hsl veya rgb değerleri kullanılarak ayarlanabilir. Eğer kenarlık rengi belirtilmemişse elemanın rengi miras alınır.

Her kenarlık, farklı renklere sahip olabilir.

Farklı Özellikte Kenarlara Sahip Kenarlıklar

border-width ve border-color konularına ait olan örneklerde görüldüğü üzere her kenar için farklı kenarlık özellikleri belirtmek mümkündür.

Yukarıdaki örnek, aşağıdaki şekilde de yazılabilir:

Eğer kenarlık özelliği 4 değere sahipse

border-width: 2px medium 4px thick;

  • üst kenarlığın 2px değerine sahip olduğunu,
  • sağ kenarlığın medium değerine sahip olduğunu,
  • alt kenarlığın 4px değerine sahip olduğunu,
  • sol kenarlığın ise thick değerine sahip olduğunu belirtir.

Eğer kenarlık özelliği 3 değere sahipse

border-width: 2px 4px 6px;

  • üst kenarlığın 2px değerine sahip olduğunu,
  • sağ ve sol kenarlığın 4px değerine sahip olduğunu,
  • alt kenarlığın 6px değerine sahip olduğunu belirtir.

Eğer kenarlık özelliği 2 değere sahipse

border-color: red blue;

  • üst ve alt kenarlığın red değerine sahip olduğunu,
  • sağ ve sol kenarlığın blue değerine sahip olduğunu belirtir.

Eğer kenarlık özelliği 1 değere sahipse

border-style: dashed;

  • tüm kenarların dashed değerine sahip olduğunu belirtir.

border Özelliği

Kenarlıklar için stenografi özelliği, border özelliği ile belirtilir. border özelliği; border-width, border-style(belirtilmesi gereklidir) ve border-color özelliklerinin tek bir özellikte belirtilmesini sağlar.

Not: Bir elemana border özelliği verilirken border-color özelliği belirtilmemişse border-color özelliğinin değeri olarak elemanın color özelliği kullanılır.

border-radius Özelliği

Bir elemana yuvarlatılmış kenarlıklar eklemek için border-radius özelliği kullanılır.

Devamını oku

Popüler

error: Content is protected !!