Arkadaşlar bu yazımızda CSS de border özelliğinin ne olduğunu ve nasıl kullanıldığını anlatacağız. Eğer CSS kutu modeli hakkında bilğiniz yoksa, onunla ilgili CSS Kutu modeli yazımızı okumanızı tavsiye ederiz.
Border, ingilizce anlamı sınırdır. Burada bizim kulladığımız elemanın etrafına bir sınır yani çerçeve özelliklerini belirlemek için kullanırız. Bir örnek verelim:
p {
border:1px solid black;
}Html Çıktısı:
Yukarıdaki örnekte gördüğümüz gibi p elementinin etrafını bir çerçeveye aldı. Bu özelliği yazma şekli aşağıdaki gibidir.
border :length style color;şeklindedir. Length parametresi çerçevenin kalınlığını inceliğini belirler. style parametresi stilini belirler. Yani düz mü, kesikli mi vb.. gibi. color parametresi ise çerçevenin rengini belirlemek için kullanırız.
CSS Border Length Parametresi
Length parametresinin alabileceği değerler:
length: Uzunluk değeri
initial: Varsayılan değere dönmesi için.
inherit: Bir üst elementin özelliklerini alması için.
thin: İnce çerçeve için.
medium: Normal çerçeve için.
thick: Kalın çerçeve için.
Not: length parametresinin varsayılan değeri medium dur. Yani border özelliğinin length parametresine değer atama yapmasak bile medium değeri atanmış olur.
Length parametresini örnekle anlatalım:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div {
border: 2px dashed purple;
width: 200px;
height: auto;
padding: 10px 10px;
}
span#length { border: 5px solid blue; }
span#initial { border: initial; }
span#thin { border: thin solid red; }
span#inherit { border: inherit; }
span#medium { border: medium solid red; }
span#thick { border: thick solid red; }
</style>
</head>
<body>
<div>
<span id="length"> length kullanımı </span> <br/> <br/>
<span id="initial"> initial kullanımı </span> <br/> <br/>
<span id="thin"> thin kullanımı </span> <br/> <br/>
<span id="inherit"> inherit kullanımı </span> <br/> <br/>
<span id="medium"> medium kullanımı </span> <br/> <br/>
<span id="thick"> thick kullanımı </span> <br/> <br/>
</div>
</body>
</html>HTML Çıktısı:
CSS Border Style Parametresi
Style parametresinin alabileceği değerler:
solid : Düz çizgi oluşturmak için.
none : Çerçeve olmaması için.
hidden : Gizli olması için.
double : Çift çizgi oluşturmak için.
dashed : Kesikli çizgi oluşturmak için.
dotted : Noktalı çizgi oluşturmak için.
groove : İçe dönük gölgeli çizgi oluşturmak için.
ridge : Dışa dönük gölgeli çizgi oluşturmak için.
inset : İçe dönük derin çizgi oluşturmak için.
outset : Dışa dönük derin çizgi oluşturmak için.
Not: Style parametresinin varsayılan değeri none dır. Yani border özelliğinin length parametresine değer atama yapmasak herhangi bir border (çerçeve) oluşmaz.
Style parametresini örnekle anlatalım:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div {
border: 2px dashed purple;
width: 200px;
height: auto;
padding: 10px 10px;
}
span#solid { border: 5px solid blue; }
span#none { border: 5px none blue; }
span#hidden { border: 5px hidden blue; }
span#double { border: 5px double blue; }
span#dashed { border: 5px dashed blue; }
span#dotted { border: 5px dotted blue; }
span#groove { border: 5px groove blue; }
span#ridge { border: 5px ridge blue; }
span#inset { border: 5px inset blue; }
span#outset { border: 5px outset blue; }
</style>
</head>
<body>
<div>
<span id="solid"> solid kullanımı </span> <br/> <br/>
<span id="none"> none kullanımı </span> <br/> <br/>
<span id="hidden"> hidden kullanımı </span> <br/> <br/>
<span id="double"> double kullanımı </span> <br/> <br/>
<span id="dashed"> dashed kullanımı </span> <br/> <br/>
<span id="dotted"> dotted kullanımı </span> <br/> <br/>
<span id="groove"> groove kullanımı </span> <br/> <br/>
<span id="ridge"> ridge kullanımı </span> <br/> <br/>
<span id="inset"> inset kullanımı </span> <br/> <br/>
<span id="outset"> outset kullanımı </span> <br/> <br/>
</div>
</body>
</html>HTML Çıktısı:
CSS Border Length Parametresi
Color parametresinin alabileceği değerler ise CSS de renk değeri atama yöntemleri ile istediğiniz gibi renk atayabilirsiniz. Genelde “#000000” şeklinde değer ile renk değeri tercihtir ama istediğiniz yöntemi kullanabiliriz.
Not: color parametresinin varsayılan değeri black (siyah) dır. Yani border özelliğinin color parametresine değer atama yapmasak bile siyah değeri atanmış olarak gelir.
Color parametresine örnek verelim:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div {
border: 2px dashed purple;
width: 200px;
height: auto;
padding: 10px 10px;
}
span#bir { border: 5px solid red; }
span#iki { border: 5px dashed #289248; }
span#uc { border: 5px dotted rgba(125, 125, 125, .5); }
</style>
</head>
<body>
<div>
<span id="bir"> solid kullanımı </span> <br/> <br/>
<span id="iki"> none kullanımı </span> <br/> <br/>
<span id="uc"> hidden kullanımı </span> <br/> <br/>
</div>
</body>
</html>HTML Çıktısı:
Border-Width Kullanımı
Bazı durumlarda border genişliğini farklı ama diğer özelliklerini sabit olmasını isteyebiliriz. Bu durumlarda style ve color özelliklerine bir değer veririz. Border-width özelliklerine ayrı ayrı değer ataması yaparız.
Kullanım şekilleri:
border-width: length; ( tüm style özellikleri verilebilir )
border-width: length length length length; ( top, right, bottom, left )
border-width: length length length; ( top, right-left, bottom )
border-width: length length; ( top-bottom, right-left )Örnek:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body{padding-left: 100px;}
span { border :solid blue;}
span#bir { border-width: thin; }
span#iki { border-width: thick; }
span#uc { border-width: none; }
/* diger bütün lenth parametreleri kullanılabilir */
span#dort { border-width: 5px 10px 15px 20px; }
span#bes { border-width: 5px 10px 15px; }
span#alti { border-width: 10px 20px; }
</style>
</head>
<body>
<span id="bir"> border-with kullanımı </span> <br/> <br/>
<span id="iki"> border-with kullanımı </span> <br/> <br/>
<span id="uc"> border-with kullanımı </span> <br/> <br/>
<span id="dort"> border-with kullanımı </span> <br/> <br/> <br/>
<span id="bes"> border-with kullanımı </span> <br/> <br/> <br/>
<span id="alti"> border-with kullanımı </span> <br/> <br/>
</body>
</html>HTML Çıktısı:
border-color Kullanımı
border-color kullanımı da border-width kullanımı gibi benzer bir özelliğe sahiptir.
Örnek yapalım:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body { padding-left: 100px; }
div { border: 3px dashed aqua; width: 200px; padding: 10px; }
span { border :5px solid;}
span#bir { border-color: red; }
span#iki { border-color: initial; }
span#uc { border-color:transparent; }
span#dort { border-color: inherit; }
span#bes { border-color: red green blue yellow; }
span#alti { border-color: 5px 10px 15px; }
span#yedi { border-color: 10px 20px; }
</style>
</head>
<body>
<div>
<span id="bir"> border-color kullanımı </span> <br/> <br/>
<span id="iki"> border-color kullanımı </span> <br/> <br/>
<span id="uc"> border-color kullanımı </span> <br/> <br/>
<span id="dort"> border-color kullanımı </span> <br/> <br/>
<span id="bes"> border-color kullanımı </span> <br/> <br/>
<span id="alti"> border-color kullanımı </span> <br/> <br/>
<span id="alti"> border-color kullanımı </span> <br/> <br/>
</div>
</body>
</html>Html Çıktısı :
border-style Kullanımı
border-style kullanımı da border-width ve border-color kullanımı gibi benzer bir özelliğe sahiptir.
Örnek:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body{padding-left: 100px;}
span { border :3px blue;}
span#bir { border-style: solid; }
span#iki { border-style: none ; }
span#uc { border-style: double ; }
/* Diger style özelliklerini vereblirsiniz. */
span#dort { border-style: solid dashed dotted double; }
span#bes { border-style: dashed solid dotted; }
span#alti { border-style: dashed solid; }
</style>
</head>
<body>
<span id="bir"> border-style kullanımı </span> <br/> <br/>
<span id="iki"> border-style kullanımı </span> <br/> <br/>
<span id="uc"> border-style kullanımı </span> <br/> <br/>
<span id="dort"> border-style kullanımı </span> <br/> <br/>
<span id="bes"> border-style kullanımı </span> <br/> <br/>
<span id="alti"> border-style kullanımı </span> <br/> <br/>
</body>
</html>HTML Çıktısı:
border-radius Kullanımı
border-radius özelliğinin kullanmamızın amacı elemanların çercevelerinin köşelerini ovalleştirmek içindir. Bazen dairesel butonlar yapmak için de kullanırız. Web sitelerinin team bölümlerindeki resimlerin dairesel şekilde olması da yine bu özellik ile olur.
Örnek:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div { border :3px solid blue; margin-bottom: 10px; width: 200px; height: 40px;}
div#bir { border-radius: 5px; }
div#iki { border-radius: none ; }
div#uc { border-radius: 25% ; }
div#dort { border-radius: 5px 10px 15px 20px ; }
div#bes { border-radius:5px 10px 20px; }
div#alti { border-radius: 5px 15px; }
div#yedi {
border-radius: 50%;
background-color: yellow;
width: 100px;
height: 100px;
text-align: center;
line-height: 90px; }
img {
border-radius: 50%;
width: 100px;
height: 100px;
border: 2px dashed gray; }
</style>
</head>
<body>
<div id="bir"> border-radius kullanımı </div>
<div id="iki"> border-radius kullanımı </div>
<div id="uc"> border-radius kullanımı </div>
<div id="dort"> border-radius kullanımı </div>
<div id="bes"> border-radius kullanımı </div>
<div id="alti"> border-radius kullanımı </div>
<div id="yedi"> %50 İndirim </div>
<img src="bebek.jpg" alt="">
</body>
</html>HTML Çıktısı:
Not: border-radius özelliği kullanırken prefix kullanmalıyız. Bunun sebebi eski tarayıcılarda hata vermemesi içindir. İsterseniz bu konuyu anlattığımız PREFİX Yazımıza bakabilirsiniz. border-radius özelliğini kullandığımız heryerde prefix ön eki kullanmamız hata olmaması açısından önemlidir. prefix ön eki aşağıdaki gibi kullanılır.
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%; Arkadaşlar yazımızın devamında prefix ön eki kullanmadan örnekleri yapacağım. Ama yayınlayacağınız bir site için bunu yapmamalıyız. Burada kodlarımız uzun olmaması için kullanmayacağım.
border-top Kullanımı
Bazen html elementlerinin çerçevesinin üst (top) kısmını değiştirmek gerekir. Bu durumda border-top kullanırız
Örnek:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div { border :5px solid blue; margin-bottom: 10px; width: 200px; height: 40px;}
div#bir { border-top: 2px dashed red; }
div#iki { border-top: none ; }
div#uc { border-top: hidden ; }
div#dort{ border-top: 20px solid blue; }
</style>
</head>
<body>
<div id="bir"> border-top kullanımı </div>
<div id="iki"> border-top kullanımı </div>
<div id="uc"> border-top kullanımı </div>
<div id="dort">border-top kullanımı </div>
</body>
</html>Html Çıktısı:
Bu örnekleri parametreleri değiştirerek çogaltabilirsiniz. Burada none ile hidden arasında fark ise none özelliğinde genişlik yok olur, hidden özelliğinde border (çerçeve) gözükmez ama genişlik vardır.
Bu özelliği kullanılırken de sadece rengi, stilini ve çerçeve genişliğini değiştirmek gerektiği durumlarda border-top-width, border-top-color, border-top-style, border-top-right-radius ve border-top-left-radius özellikleri kullanırız.
border-top-width Kullanımı
Html elementinin çerçevesinin sadece üst (top) kısmının length parametresini değiştirmek için kullanırız.
Örnek:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div { border :5px solid blue; margin-bottom: 10px; width: 200px; height: 40px;}
div#bir { border-top-width:thick; }
div#iki { border-top-width: 20px ; }
div#uc { border-top-width: medium; }
div#dort { border-top-width: thin; }
div#bes { border-top-width: initial; }
</style>
</head>
<body>
<div id="bir"> border-top-width kullanımı </div>
<div id="iki"> border-top-width kullanımı </div>
<div id="uc"> border-top-width kullanımı </div>
<div id="dort"> border-top-width kullanımı </div>
<div id="bes"> border-top-width kullanımı </div>
</body>
</html>Html Çıktısı:
border-top-style Kullanımı
Html elementinin çerçevesinin sadece üst (top) kısmının style parametresini değiştirmek için kullanırız.
Örnek:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div { border :5px solid blue; margin-bottom: 10px; width: 200px; height: 40px;}
div#bir { border-top-style :dashed; }
div#iki { border-top-style :double; }
div#uc { border-top-style :hidden; }
</style>
</head>
<body>
<div id="bir"> border-top-style kullanımı </div>
<div id="iki"> border-top-style kullanımı </div>
<div id="uc"> border-top-style kullanımı </div>
</body>
</html>HTML Çıktısı:
border-top-color Kullanımı
Html elementinin çerçevesinin sadece üst (top) kısmınının color parametresini değiştirmek için kullanlır.
Örnek:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div { border :5px solid purple; margin-bottom: 10px; width: 200px; height: 40px;}
div#bir { border-top-color :red; }
div#iki { border-top-color :rgba(0, 0, 255, .5 )}
div#uc { border-top-color : #00ff00; }
</style>
</head>
<body>
<div id="bir"> border-top-color kullanımı </div>
<div id="iki"> border-top-color kullanımı </div>
<div id="uc"> border-top-color kullanımı </div>
</body>
</html>HTML Çıktısı:
border-top-right-radius ve border-top-left-radius Kullanımı
Html elementinin çerçevesinin sadece üst (top) kısmının radius özelliğini değiştirmek için kullanılır.
Örnek:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div { border :5px solid blue; margin-bottom: 10px; width: 200px; height: 40px;}
div#bir {border-top-right-radius :10px; border-top-left-radius :10px;}
div#iki {border-top-right-radius :20px 10px; border-top-left-radius :25px 10px;}
div#uc {border-top-right-radius :20%; border-top-left-radius :20%;}
div#dort{border-top-right-radius :10% 30%; border-top-left-radius :10% 30%;}
</style>
</head>
<body>
<div id="bir"> border-top-radius kullanımı </div>
<div id="iki"> border-top-radius kullanımı </div>
<div id="uc"> border-top-radius kullanımı </div>
<div id="dort">border-top-radius kullanımı </div>
</body>
</html>HTML Çıktısı:
border-right Kullanımı
Bazen html elementlerinin çerçevesinin sağ (right) kısmını değiştirmek gerekir. Bu durumda border-right kullanılır. Örnek:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div { border :5px solid blue; margin-bottom: 10px; width: 200px; height: 40px;}
div#bir { border-right: 2px dashed red; }
div#iki { border-right: none ; }
div#uc { border-right: hidden ; }
div#dort{ border-right: 20px solid blue; }
</style>
</head>
<body>
<div id="bir"> border-right kullanımı </div>
<div id="iki"> border-right kullanımı </div>
<div id="uc"> border-right kullanımı </div>
<div id="dort">border-right kullanımı </div>
</body>
</html>Html Çıktısı:
Bu örnekleri parametreleri değiştirerek çogaltabilirsiniz. Burada none ile hidden arasında fark ise none özelliğinde genişlik yok olur, hidden özelliğinde border (çerçeve) gözükmez ama genişlik vardır.
Bu özelliği kullanılırken de sadece rengi, stilini ve çerçeve genişliğini değiştirmek gerektiği durumlarda border-right-width, border-right-color ve border-right-style özellikleri kullanılır. Bunları tekrar burada örnek vermemize gerek yok. Aynı border-top kullanımında olduğu örneklerde top yerine right yazarak uygulayabilirsiniz. Farklı olarak burada radius değerleri yoktur.
border-bottom Kullanımı
Bazen html elementlerinin çerçevesinin alt (bottom) kısmını değiştirmek gerekir. Bu durumda border-bottom kullanılır. Örnek:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div { border :5px solid blue; margin-bottom: 10px; width: 200px; height: 40px;}
div#bir { border-bottom: 2px dashed red; }
div#iki { border-bottom: none ; }
div#uc { border-bottom: hidden ; }
div#dort{ border-bottom: 20px solid blue; }
</style>
</head>
<body>
<div id="bir"> border-bottom kullanımı </div>
<div id="iki"> border-bottom kullanımı </div>
<div id="uc"> border-bottom kullanımı </div>
<div id="dort">border-bottom kullanımı </div>
</body>
</html>Html Çıktısı:
Bu özelliği kullanılırken de sadece rengi, stilini ve çerçeve genişliğini değiştirmek gerektiği durumlarda border-bottom-width, border-bottom-color, border-bottom-style, border-bottom-right-radius ve border-bottom-left-radius özellikleri kullanılır. Bunları tekrar burada örnek vermemize gerek yok. Aynı border-top kullanımında olduğu örneklerde top yerine bottom yazarak uygulayabilirsiniz.
border-left Kullanımı
Bazen html elementlerinin çerçevesinin sol (left) kısmını değiştirmek gerekir. Bu durumda border-left kullanırız.
Örnek:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div { border :5px solid blue; margin-bottom: 10px; width: 200px; height: 40px;}
div#bir { border-left: 2px dashed red; }
div#iki { border-left: none ; }
div#uc { border-left: hidden ; }
div#dort { border-left: 20px solid blue; }
</style>
</head>
<body>
<div id="bir"> border-left kullanımı </div>
<div id="iki"> border-left kullanımı </div>
<div id="uc"> border-left kullanımı </div>
<div id="dort"> border-left kullanımı </div>
</body>
</html>HTML Çıktısı:
Bu özelliği kullanılırken de sadece rengi, stilini ve çerçeve genişliğini değiştirmek gerektiği durumlarda border-left-width, border-left-color ve border-left-style özellikleri kullanırız. Bunları tekrar burada örnek vermemize gerek yok. Aynı border-top kullanımında olduğu örneklerde top yerine left yazarak uygulayabilirsiniz. Farklı olarak burada radius değerleri yoktur.
Border-image Kullanımı
Html elementlerine çerçeve olarak resim atamak için kullanılır. Güzel desenler oluşur. Kullanım şekli ilk parametre resmin url si, ikinci parametre resmi hangi boyutlarda bölüneceği ve üçüncü parametre de ne stilde kenarlara yerleştirileceği diyebiliriz. Kullanım şekilleri aşağıdaki gibidir:
/* Kullanım şekli 1 */
border-image: parametre1 parametre2 parametre3;
/* Kullanım şekli 2 */
border-image-source:parametre1;
border-image-slice:parametre2;
border-image-repeat:parametre3;Örnek 1:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div {
width: 200px;
height: 100px;
text-align: center;
border: 10px solid transparent;
margin-right: 10px;
margin-bottom: 5px;
float: left; }
div#bir{ border-image: url(desen.png) 10 stretch; }
div#iki{ border-image: url(desen.png) 33% repeat; }
div#uc{ border-image: url(desen.png) 33% round; }
div#dort{
border-image-source: url(desen.png);
border-image-slice: 33%;
border-image-repeat: stretch;
border-image-width: 5px;
}
div#bes{
border-image-source: url(desen.png);
border-image-slice: 33%;
border-image-repeat: repeat;
border-image-width: 5px 10px;
}
div#alti{
border-image-source: url(desen.png);
border-image-slice: 33%;
border-image-repeat: round;
border-image-width: 5px 10px 15px 20px;
}
div#yedi{
border-image: url(desen.png) 10 round;
border-image-outset:10px 100px 5px 5px;
}
div#sekiz{
border-image: url(desen.png) 10 round;
border-image-outset:0 15px 100px 5px;
}
</style>
</head>
<body>
<div>
<div id="bir"> 1</div>
<div id="iki"> 2</div>
<div id="uc"> 3</div>
</div>
<div>
<div id="dort">4</div>
<div id="bes"> 5 </div>
<div id="alti">6</div>
</div>
<div>
<div id="yedi"> 7</div>
<div id="sekiz"> 8</div>
</div>
</body>
</html>
Html Çıktısı:
border-image-width özelliği ile yine çerçeve genişliğini ayarlarız. border-image-outset özelliği ise çerçeveyi dışa taşırmak için kullanırız
Örnek 2: border-image linear-gradient Kullanımı:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div {
width: 200px;
height: 100px;
border: 5px solid transparent;
border-image: linear-gradient(yellow, green, black) 5; }
</style>
</head>
<body>
<div> </div>
</body>
</html>Html Çıktısı:
Arkadaşlar yazımız biraz uzun oldu ama CSS de border konusunu tek bir yazı halinde ele aldık. Sizlere faydalı olmasını umarım.
Başka bir yazımızda buluşmak üzere…
