border-shape: clip-path'in eksik kalan parçası geliyor
CSS'e gelen border-shape özelliği, clip-path kullanırken kaybolan border, box-shadow ve outline sorununu çözüyor. Şekli değiştirir, süslemeleri kırpmaz.
clip-path veya mask kullanan geliştiriciler yıllardır aynı sorunla karşılaştı: bir elemente özel bir şekil verdiğinizde, üzerine eklediğiniz border, box-shadow ve outline da bu şekille birlikte kırpılıp yok oluyordu. Bunun nedeni basit; clip-path elementi boyandıktan sonra tüm dekorasyonuyla birlikte kırpıyor. CSS-Tricks'te Temani Afif'in ele aldığı yeni border-shape özelliği bu mantığı tersine çeviriyor: element kırpılmıyor, yalnızca şekillendiriliyor. Böylece border, box-shadow ve outline artık dikdörtgen kutunun değil, tanımlanan yeni şeklin dış hattını takip ediyor.
border-shape, clip-path ile aynı sözdizimini ve shape() fonksiyonunu kullanıyor, dolayısıyla öğrenme eğrisi neredeyse sıfır. Ayrıca 'stroke' ve 'fill' modları sayesinde iki farklı şekil arasındaki alanı border olarak boyamak da mümkün; bu da eskiden pseudo-element ve overflow: hidden hileleriyle zar zor taklit edilen efektleri tek satırlık CSS'e indiriyor. shape() fonksiyonunun Baseline'a ulaşmış olması ve corner-shape özelliğiyle birlikte köşe bazlı şekillendirmenin de mümkün hale gelmesi, CSS şekil araçlarının artık dağınık özellikler yığını değil, tutarlı bir sistem gibi çalıştığını gösteriyor.
Ancak şu an için destek yalnızca Chromium tabanlı tarayıcılarla sınırlı, bu da özelliği prodüksiyon için erken kılıyor. Geliştiriciler için önerilen yaklaşım, yan projelerde denemek, fallback senaryolarını test etmek ve Gecko ile WebKit'in özelliği ne zaman benimseyeceğini izlemek.