Element içine border nasıl yapılır – CSS

Element içine border nasıl yapılır, Bu makalede CSS’de sıkça kullandığımız border özelliğini element’e iç border olarak nasıl tanımlayabiliriz onu görüyor olacağız.

Element içine border nasıl yapılır – CSS

Element içine border nasıl yapılır - CSS

Altta görüldüğü gibi basit 2 butonumuz mevcut. Bu butonların arkaplanı siyah ama üzerine gelince iç border olmasını istiyorum. Normalde css hover olayı ile yaptığımda ekstra bir dış alan oluşturarak istemediğim bir görüntü ortaya çıkaracak. Şimdi sorunu görebilmek adına öncelikle css ve html kodumuza göz atalım ardından demo üzerinden sorunu kendiniz canlı olarak görün.

HTML Kodumuz

CSS Kodumuz

Demo

Gördüğünüz gibi “MURAT” yada “ÖNER” adındaki elementlerin üzerine geldiğinizde border gözüküyor ama ve ekstra bir dış alan oluşturuluyor haliyle ama ben bunu istemiyorum. Border görünüm olsun ama ekstra bir dış alan oluşturmasın istiyorum. Bu durumda border yerine box-shadow kullanarak bu ihtiyacımı gidericem. Hemen box-shadow ile iç border görünüm nasıl oluşturabiliriz bakalım.

Üstteki CSS Kodumuzdan border satırını silip alttaki gibi revize edince tam olarak ihtiyacımızı karşılamış oluyoruz.

CSS Kodumuz – Revize

Hemen düzeltilmiş halinin demosuna bakalım ne fark olmuş görelim.

Demo


📚 Benzer Kaynaklar


✍ Lütfen olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.

🔗 Sosyal medya kanallarından makaleyi paylaşarak destek olursanız çok sevinirim.

👋 Bir sonraki makalede görüşmek dileğiyle.