CSS border-image Animasyonu Nasıl Yapılır? @property ile Adım Adım

CSS border-image animasyonu, kenarlığa gradient verip bu gradient’in renk duraklarını @property ile kaydedilmiş bir CSS değişkeniyle hareket ettirerek yapılır. Gradient’ler varsayılan olarak animasyona girmez; değişkeni <percentage> ya da <angle> türünde kaydettiğinizde tarayıcı ara değerleri kendisi hesaplar ve kenarlık “kendini çiziyormuş” gibi dolar.

Teknik, CSS-Tricks’te Preethi’nin 10 Ağustos 2026’da yayımladığı Animating CSS border-image yazısına dayanıyor. Aşağıda aynı yöntemi kendi örneklerimizle adım adım kuruyor, ardından kaynak yazının ele almadığı üç konuya bakıyoruz: köşe yuvarlama sınırı, dokunmatik ekranda hover sorunu ve hareket azaltma tercihi.

border-image nedir, hangi parçalardan oluşur?

border-image, kenarlıkta düz çizgi yerine bir görsel ya da gradient kullanmanızı sağlayan kısayol (shorthand) özelliktir. MDN’e göre beş alt özelliği vardır ve Temmuz 2015’ten beri tüm tarayıcılarda çalışır (MDN: border-image).

border-image-source

Ne çizilecek?

Görsel ya da gradient. Başlangıç değeri none.

border-image-slice

Nasıl dilimlenecek?

Kaynağı köşe ve kenar parçalarına böler. Başlangıç: 100%.

border-image-width

Ne kalınlıkta?

Kenarlığın fiziksel kalınlığı. Başlangıç: 1.

border-image-outset

Ne kadar dışarıda?

Kenarlığı kutunun dışına iter. Başlangıç: 0.

border-image-repeat

Nasıl döşenecek?

stretch, repeat, round ya da space. Başlangıç: stretch.

Örneklerde her alt özelliği ayrı satırda yazıyoruz; hangi değerin gradient’i nasıl etkilediği böylece daha net görünüyor. Dikkat: border kısayolu, border-image’in tüm alt özelliklerini başlangıç değerlerine sıfırlar (MDN). border’ı her zaman border-image’den önce yazın.

CSS border-image animasyonu nasıl yapılır? (4 adım)

Örnek, içinde kısa bir metin olan tek bir kart. Kenarlık başta görünmez; fareyle üzerine gelince ya da klavyeyle odaklanınca sağ alt köşeden başlayarak tüm kartı sarar.

1. Kartı ve görünmez gradient’i hazırlayın

<div class="card" tabindex="0">Kart başlığı</div>

.card {
  width: 240px;
  aspect-ratio: 0.69;

  /* Kenarlık olarak çizilecek gradient: başta tamamen şeffaf */
  border-image-source: linear-gradient(-45deg, #2957ff 0%, transparent 0%);
  /* Gradient'i dört kenara kesintisiz yayar */
  border-image-slice: 1;
  /* Kenarlığın kalınlığı */
  border-image-width: 8px;
  /* Kenarlığı karttan 8px dışarı iter */
  border-image-outset: 8px;
}

İki renk durağı da 0%’da başladığı için tarayıcının renkleri karıştıracak alanı kalmaz. transparent kodda ikinci sırada olduğundan tüm gradient’i o doldurur ve kenarlık görünmez. Kenarlığın çizilmesi için border-image-source ile border-image-width şart; border-image-slice: 1 ise gradient’in bütün kenara düzgünce yayılmasını sağlar (CSS-Tricks).

2. Değişkeni @property ile kaydedin

Gradient’in renk durağı bir yüzdedir. Normal bir CSS değişkeni tarayıcı için tipsiz bir metin parçasıdır, yani 0%’dan 100%’e geçişte ara değer hesaplanamaz ve değişim anında olur. Değişkene tür verdiğinizde bu sorun çözülür:

@property --p {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: false;
}

--p: 0% → 100%

Kayıtsız değişken

Tarayıcı değeri metin olarak görür. transition yazsanız da kenarlık tek karede belirir.

@property --p

Kayıtlı değişken

syntax: "<percentage>" sayesinde tarayıcı 0 ile 100 arasındaki tüm ara değerleri hesaplar ve kenarlık akıcı biçimde dolar.

3. Gradient’te değişkeni kullanın

.card {
  border-image-source: linear-gradient(-45deg, #2957ff var(--p), transparent 0%);
  transition: --p 0.6s;
}

4. Etkileşimde değeri değiştirin

.card:hover,
.card:focus-visible {
  --p: 100%;
}

Bu kural, mavi rengin ancak gradient’in sonunda (100%) bitmesini söyler. Gradient düz maviye dönerken kenarlık kendini çiziyormuş gibi görünür. Kaynak yazı yalnızca :hover kullanıyor; biz :focus-visible ve tabindex="0" ekledik, çünkü dokunmatik ekranda ve klavyede hover diye bir durum yok.

conic-gradient ve border-image-slice ile varyasyon

Aynı yöntemi conic-gradient ile kurduğunuzda kenarlık kartın merkezinden saat yönünde döner. Burada iki değişken birlikte hareket eder: gradient’in açısı (--a) ve dilim değeri (--n). border-image-repeat: round, kenara tam sayıda parça sığdırmaya çalışır; sığmazsa parçaları hafifçe gerer ya da sıkıştırır (CSS-Tricks).

@property --n {
  syntax: "<number>";
  initial-value: 1;
  inherits: false;
}

@property --a {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.card {
  border-image-source: conic-gradient(from var(--a), #2957ff var(--a), transparent 0%);
  border-image-width: 8px;
  border-image-slice: var(--n);
  border-image-repeat: round;
  /* Yalnızca bu iki değişken geçiş yapar; performans için iyi */
  transition-property: --n, --a;
  transition-duration: 0.6s;
}

.card:hover,
.card:focus-visible {
  --n: 20;     /* dilimi büyütür, kenarda kesikler oluşur */
  --a: 360deg; /* gradient tam tur döner */
}

--n 1’den 20’ye çıktıkça dilim büyür ve kenarlıkta kesikler belirir; galerideki üçüncü görsel bu durumu gösteriyor. border-image-slice’ı değişken kullanmadan doğrudan da animasyona sokabilirsiniz: MDN bu özelliğin “hesaplanan değer türüne göre” canlandırıldığını yazıyor (MDN). CSS-Tricks’e göre sonuç tarayıcıya göre biraz farklı olabilir.

border-image’in sınırları: ne zaman başka yöntem seçmeli?

• border-radius çalışmaz: MDN’e göre border-radius kenarlık görselini etkilemez, kenarlık her zaman dikdörtgen kalır (MDN, web.dev).
• border-style yedeği: Bazı tarayıcılar border-style: none ya da border-width: 0 iken kenarlık görselini çizmez. Görsel yüklenemezse de border-style görünür. Ayrı bir border-style tanımlayın (MDN).
• fill ile katman sırası: border-image-slice’a fill eklerseniz görsel arka planın altına değil üstüne boyanır (web.dev).
• Tek tanım, dört kenar: Gradient otomatik olarak dört kenara yayılır ve dilimlenebilir. CSS-Tricks’in border-image’i tercih etme sebebi bu verimlilik.

border-image

Köşeler keskinse

En kısa kod. Dilim ve tekrar ayarlarıyla kesikli/döşemeli efektler kolay. Yuvarlak köşe yok.

çift background

Köşeler yuvarlaksa

background-clip: padding-box, border-box ile iki katman. border-radius’a uyar. MDN’in önerdiği yol.

::before / ::after

Karmaşık efekt gerekiyorsa

Sahte kenarlık katmanı. Esnek ama kutu modelini bozar; kenarlık kalınlığını padding olarak telafi etmek gerekir.

Hareket azaltma tercihine nasıl saygı gösterilir?

İşletim sisteminde “hareketi azalt” ayarını açan kullanıcılar için animasyonu kapatın, efektin son hâlini koruyun. Ne CSS-Tricks yazısı ne de web.dev’in kenarlık animasyonu rehberi bu adıma yer veriyor. Oysa WCAG 2.2’nin AAA düzeyindeki 2.3.3 Animation from Interactions kriteri, etkileşimle tetiklenen hareketin kapatılabilmesini istiyor ve bunun için prefers-reduced-motion sorgusunu yeterli teknik olarak sayıyor.

@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none; /* kenarlık yine görünür, sadece anında */
  }
}

Böylece kenarlık hover ve odakta yine belirir; görsel geri bildirim kaybolmaz, sadece hareket ortadan kalkar (MDN: prefers-reduced-motion).

Tarayıcı desteği

Özellik	Durum	Not
border-image	Baseline: geniş destek	Temmuz 2015’ten beri tüm tarayıcılarda
@property	Baseline 2024	Temmuz 2024’ten beri güncel tarayıcılarda; Chrome/Edge 85, Firefox 128, Safari 16.4
conic-gradient ile animasyon	@property’ye bağlı	Açı değişkeni kayıtlı değilse geçiş olmaz

Eski tarayıcılarda @property yok sayılır. Animasyon olmaz ama hover’da kenarlık yine anında belirir, yani efekt sorunsuz biçimde basitleşir.

Benzer yazılar: JavaScript’siz hareket için SMIL ile SVG animasyonu, kenar yerine aralara çizgi çekmek için CSS Gap Decorations, kartı bileşen bazında boyutlandırmak için container query’ler ve kenarlık rengini seçerken OKLCH’de lightness tuzağı.

Sık sorulan sorular

CSS’te gradient neden doğrudan animasyona girmez?

Tarayıcı iki gradient arasında ara değer hesaplayamaz; çünkü geçişin konusu renk durakları ve yüzdeler. Durağı @property ile <percentage> ya da <angle> türünde kaydedilmiş bir değişkene bağladığınızda tarayıcı bu değişkeni canlandırabilir.

border-image ile yuvarlak köşeli kenarlık yapılır mı?

Hayır. border-radius kenarlık görselini etkilemez. Yuvarlak köşe istiyorsanız gradient’i background-clip: padding-box, border-box ile iki katmanlı arka plan olarak çizin (MDN).

border-image-slice: 1 ne işe yarar?

Gradient’i 1 birimlik dilimlere ayırır. Sonuçta gradient dört kenara kesintisiz yayılır. Değeri büyüttükçe (ör. 20) kenarlıkta kesikler oluşur.

@property hangi tarayıcılarda çalışır?

MDN’e göre Temmuz 2024’ten beri güncel tarayıcıların hepsinde çalışıyor (Baseline 2024). web.dev’in listesine göre ilk destekleyen sürümler Chrome ve Edge 85, Firefox 128, Safari 16.4.

Hover efekti telefonda neden çalışmıyor?

Dokunmatik ekranda fare imleci olmadığı için hover güvenilir bir durum değil. Aynı kuralı :focus-visible için de yazın ve öğeye tabindex="0" verin; etkileşimli bir öğe gerekiyorsa <button> ya da <a> kullanın.