CSS dünyası son zamanlarda şekil oluşturma konusunda büyük yeniliklerle dolup taşıyor. Geçtiğimiz aylarda shape() fonksiyonu ve corner-shape özelliği hayatımıza girdi. Şimdi ise sırada border-shape var! Peki bu yeni özellik ne işe yarıyor ve neden bu kadar heyecan verici? Gelin, CSS şekillerine kenarlık ekleme konusunda devrim yaratacak bu özelliği yakından inceleyelim.
Öncelikle border-shape'in ne olduğunu anlamak için biraz geriye gidelim. shape() fonksiyonu, SVG sözdizimini kullanarak CSS'de kolayca şekil oluşturmayı sağlar. corner-shape ise border-radius ile birlikte çalışarak köşelerin şeklini (yuvarlak, kavisli, eğimli vb.) belirler. Ancak bu özelliklerin büyük bir eksikliği vardı: şekillere kenarlık eklemek neredeyse imkansızdı. İşte border-shape tam da bu noktada devreye giriyor ve clip-path veya mask ile yapılamayanı başarıyor: dekoratif özelliklerin (border, box-shadow, outline) şekli takip etmesini sağlıyor.
border-shape özelliği, clip-path ile aynı değerleri alır ve shape() fonksiyonunu da destekler. Kullanımı son derece basittir: clip-path yerine border-shape yazmanız yeterlidir. Örneğin, .shape { border-shape: polygon(50% 0%, 100% 100%, 0% 100%); } koduyla üçgen bir şekil oluşturabilir ve bu şekle border, box-shadow gibi özellikler ekleyebilirsiniz. Ayrıca iki şekil değeri kullanarak kesik (cutout) şekiller de oluşturabilirsiniz. İlk şekil dış sınırı, ikinci şekil ise iç sınırı belirler ve kenarlık bu iki sınır arasında oluşur.
Şu an için sadece Chrome'da desteklenen border-shape, CSS şekilleri oluşturma konusunda yeni ufuklar açıyor. Kenarlıklı şekiller, kesik şekiller ve daha fazlası artık çok kolay. Bu özellik sayesinde CSS ile yaratıcı tasarımlar yapmak hiç bu kadar zahmetsiz olmamıştı. Gelecekte diğer tarayıcıların da desteğiyle border-shape, web tasarımında standart bir araç haline gelecek gibi görünüyor.
