HTML 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.
Border Nedir?
CSS’de html elementlerinin etrafına sınırlarını belli etmek ya da daha güzel görüntü sağlamak için border’lar çizeriz. Örnek olarak alttaki görselin etrafında siyah renkte bir border uygulandığını görüyoruz.
HTML Elementlerine Border Nasıl Uygulanır?
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
1 2 3 4 5 6 | <div> MURAT </div> <div> ÖNER </div> |
CSS Kodumuz
1 2 3 4 5 6 7 8 9 10 11 12 13 | div { background-color: #000; color: #fff; display: inline-block; padding: 5px; font-weight: bolder; } div:hover { background-color:#fff; color:#000; border: 4px solid #000; } |
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.
HTML Elementlerine İç Border Nasıl Uygulanır?
Üstteki CSS Kodumuzdan border satırını silip alttaki gibi revize edince tam olarak ihtiyacımızı karşılamış oluyoruz.
CSS Kodumuz – Revize
1 2 3 4 5 6 7 8 9 10 11 12 | div { background-color: #000; color: #fff; display: inline-block; padding: 5px; font-weight: bolder; } div:hover { background-color: #fff; color: #000; box-shadow: inset 0px 0px 0px 4px #000; } |
Hemen düzeltilmiş halinin demosuna bakalım ne fark olmuş görelim.
Demo
📚 HTML Element İçine Border Benzeri Kaynaklar
✍ Lütfen HTML Element içine border konulu makale için olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.
🔗 Sosyal medya kanallarından HTML Element içine border konulu makaleyi paylaşarak destek olursanız çok sevinirim.
👋 Bir sonraki makalede görüşmek dileğiyle.
pratik biz çözüm ve mantıklı da 😉