Merhabalar, bu yazımda Html içindeki nesnelerin kenarlıklarını ayarlamak için border kavramına bakacağız.

Temel Kullanım

border: 1px solid red;

1. değer kalınlık

2. değer şekli

3. değer rengidir.

Bu şekilde bir defada uygulanırsa bütün kenarlara uygulanır.

Ancak biz sadece istediğimiz kenarlara border uygulayabiliriz.

Şimdi tek tek bakalım.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <style>
 
        body{
            margin: 0px;
        }
 
        .box{
            width: 300px;
            height: 300px;
            float: left;
            background-color: rgb(162, 135, 206);
            margin-right: 10px;
            margin-top: 10px;
        }
 
        #first{
 
            border: 2px solid red;
 
        }
 
        #second{
            border-top: 3px solid black;
 
        }
 
        #third{
 
            border-bottom: 4px dotted blueviolet;
 
        }
 
    </style>
</head>
<body>
 
    <div class="box" id="first"></div>
    <div class="box" id="second"></div>
    <div class="box" id="third"></div>


</body>
</html>

Her kenarlığa ayrı ayrı renk verilebilir.

#second{
            border-top: 3px solid;
            border-top-color: tomato;
 
        }

Bir sonraki yazımda görüşmek üzere.


What's Your Reaction?

love
0
love
hate
0
hate
win
0
win
geeky
0
geeky
omg
0
omg
lol
0
lol
fail
0
fail
fun
0
fun
Murat Bilginer
21 Şubat 1992'de doğdum. Endüstri Mühendisi olarak lisansımı 2016 yılında tamamladım. Industryolog Akademi - NGenius oluşumlarının kurucusuyum. Şu anda kendi şirketim Brainy Tech ile Web ve Mobil Geliştirme, AWS, Google Cloud Platform Sistemleri İçin DevOps, Big Data Analiz ve Görselleştirme hizmetleri sunmakta ve Online Eğitimler vermekteyiz.