CSS border-right

border-right :

Elementin Sağ kenarlık özelliklerini ayarlamak için kullanılır.

Örnek

#borderRight{
  border-style: solid;
    border-right: thick double blue;
}

Codepen Ön izleme

See the Pen <a href="http://codepen.io/w3tr/pen/LpMmGm/">border-right</a> by W3TR (<a href="http://codepen.io/w3tr">@w3tr</a>) on <a href="http://codepen.io">CodePen</a>.

Css Sözdizimi

Değer	Açıklama
border-right-width	Sağ kenarlık genişliğini ayarlamak için kullanılır.
border-right-style	Sağ kenarlık stilini ayarlamak için kullanılır.
Border-right-color	Sağ kenarlık rengini ayarlamak için kullanılır.
İnital
İnherit

Tarayıcı Desteği


1.0	1.0	4.0	1.0	3.5

Posted on 13 Kasım 20155 Mayıs 2016 by Samed GÖZÜTOK 0

CSS border-radius

Border-radius :

Elementin köşelerine yuvarlak bir görünüm vermek için kullanılır.

Örnek

#borderRadius{
      border: 3px solid;
    border-radius: 20px;
    padding:20px;
}

Codepen Ön izleme

See the Pen <a href="http://codepen.io/w3tr/pen/GpPdgz/">border-radius</a> by W3TR (<a href="http://codepen.io/w3tr">@w3tr</a>) on <a href="http://codepen.io">CodePen</a>.

Css Sözdizimi

Değer	Açıklama
length	Elementin px,cm,pt,yüzdeli vs. değerler alabileceğini belirtir.
İnital
İnherit

Tarayıcı Desteği


5.0 4.0-webkit	4.0 4.0-moz	9.0	5.0 3.1-moz	10.5

Posted on 13 Kasım 201523 Temmuz 2016 by Samed GÖZÜTOK 0

CSS border-left-width

border-left-width :

Elementin Sol kenarlık genişliğini ayarlamak için kullanılır.

Örnek

#borderLeft{
      border-style: solid;
    border-left-width: 10px;
}

Codepen Ön izleme

See the Pen <a href="http://codepen.io/w3tr/pen/PPXeYL/">border-left-width</a> by W3TR (<a href="http://codepen.io/w3tr">@w3tr</a>) on <a href="http://codepen.io">CodePen</a>.

Css Sözdizimi

Değer	Açıklama
medium	Kenarlık genişliğini orta olarak ayarlar.
thin	İnce bir sol kenarlık belirtir.
thick	Kalın bir sol kenarlık belirtir.
length	Elementin px,cm,pt,yüzdeli vs. değerler alabileceğini belirtir.
İnital
İnherit

Tarayıcı Desteği


1.0	1.0	4.0	1.0	3.5

Posted on 13 Kasım 201523 Temmuz 2016 by Samed GÖZÜTOK 1

CSS border-left-style

Border-left-style :

Elementin Sol kenarlık stilini ayarlamak için kullanılır.

Örnek

#borderLeft{
   border-style: solid;
    border-left-style: dotted;
}

Codepen Ön izleme

See the Pen <a href="http://codepen.io/w3tr/pen/dYwmad/">border-left-style</a> by W3TR (<a href="http://codepen.io/w3tr">@w3tr</a>) on <a href="http://codepen.io">CodePen</a>.

Css Sözdizimi

Değer	Açıklama
none	Kenarlık stilinin olmadığını belirtir.
hidden	Kenarlığı gizlemek için kullanılır.
dotted	noktalı bir kenarlık olduğunu belirtir.
dashed	kesik çizgili bir kenarlık olduğunu belirtir.
double	çift kenarlıklı bir kenarlık olduğunu belirtir.
solid	düz kenarlıklı bir kenarlık olduğunu belirtir.
groove	düz kenarlıklı bir kenarlık olduğunu belirtir.
inset	3D gömme kenar tanımlar. Efekt border-color değerine bağlıdır.
ridge	3D oluklu kenar tanımlar. Efekt border-color değerine bağlıdır.
outset	3D outset kenar tanımlar. Efekt border-color değerine bağlıdır.
İnital
İnherit

Tarayıcı Desteği


1.0	1.0	5.5	1.0	9.2

Posted on 13 Kasım 201523 Temmuz 2016 by Samed GÖZÜTOK 0

CSS border-left-color

Border-left-color :

Elementin Sol kenarlık rengini ayarlamak için kullanılır.

Not: Her zaman için önce border-left-color özelliklerini ayarlayınız. Rengi değiştirmek için önce border elementiniz olması gerekir.

Örnek

#borderLeft {
      border-style: solid;
    border-left-color: blue;
}

Codepen Ön izleme

See the Pen <a href="http://codepen.io/w3tr/pen/rOoddx/">border-left-color</a> by W3TR (<a href="http://codepen.io/w3tr">@w3tr</a>) on <a href="http://codepen.io">CodePen</a>.

Css Sözdizimi

Değer	Açıklama
color	Sol kenarlık rengini belirtmek için kullanılır.
transparent	Sol kenarlık renginin transparan yapmak için kullanılır.
İnital
İnherit

Tarayıcı Desteği


1.0	1.0	4.0	3.5	1.0

Posted on 13 Kasım 201523 Temmuz 2016 by Samed GÖZÜTOK 0

CSS border-left

Border-left :

Elementin Sol kenarlık özelliklerini ayarlamak için kullanılır.

Örnek

#borderLeft{ 
border-style: solid;
    border-left: thick double blue;
}

Codepen Ön izleme

See the Pen <a href="http://codepen.io/w3tr/pen/JYwpVY/">border-left</a> by W3TR (<a href="http://codepen.io/w3tr">@w3tr</a>) on <a href="http://codepen.io">CodePen</a>.

Css Sözdizimi

Değer	Açıklama
border-left-width	Sol kenarlık genişliğini ayarlamak için kullanılır. varsayılan değeri “medium “dur.
border-left-style	Sol kenarlık stilini ayarlamak için kullanılır.
Border-left-color	Sol kenarlık rengini ayarlamak için kullanılır.
İnital
İnherit

Tarayıcı Desteği


15.0	15.0	4.0	3.5	1.0

Posted on 13 Kasım 20155 Mayıs 2016 by Samed GÖZÜTOK 0

CSS border-image-width

border-image-width :

border-image-width özelliği, border ‘ a verilen resmin genişliğini belirtmek için kullanılır.

Örnek

#borderimage{
  border-image:url(http://w3tr.com/file/border.png) 50 round;
    border-image-width: 5px; 
   padding: 10px;
}

Codepen Ön izleme

See the Pen <a href='http://codepen.io/w3tr/pen/bVOLKa/'>border-image-width</a> by W3TR (<a href='http://codepen.io/w3tr'>@w3tr</a>) on <a href='http://codepen.io'>CodePen</a>.

Css Sözdizimi

Değer	Açıklama
number	4 kenar içinde width verilecek kenarın hangi kenar olduğunu belirtir.
auto	Genişliği otomatik ayarlar.
%	Yüzdeli değerler ile genişlik verir.
İnital
İnherit

Tarayıcı Desteği


15.0	15.0	11.0	6.0	15.0

Posted on 13 Kasım 201525 Kasım 2015 by Samed GÖZÜTOK 0

CSS border-image-source

border-image-source :

border-image-source özelliği, border ‘ a verilen resmi değiştirmek için kullanılır.

örnek

#borderimage {
  border-image-source: url(http://w3tr.com/file/border2.png);
  border-image-slice: 100;
}

Codepen Ön izleme

See the Pen <a href='http://codepen.io/w3tr/pen/yYGvJK/'>border-image-source</a> by W3TR (<a href='http://codepen.io/w3tr'>@w3tr</a>) on <a href='http://codepen.io'>CodePen</a>.

Css Sözdizimi

Değer	Açıklama
none	Varsayılan değer. Kullanılacak görüntü yok.
image	Görüntün yolunu belirtir.
İnital
İnherit

Tarayıcı Desteği


15.0	15.0	11.0	6.0	15.0

Posted on 13 Kasım 201525 Kasım 2015 by Samed GÖZÜTOK 1

CSS border-image-repeat

border-image-repeat :

border-image-repeat özelliği, border ‘ ın belirtilen boyutlar içinde tekrarlanmasını sağlar.

Örnek

#borderimage{
    -webkit-border-image: url(http://w3tr.com/file/border.png) 50 round;
    -o-border-image: url(http://w3tr.com/file/border.png) 50 round; 
    border-image: url(http://w3tr.com/file/border.png) 50 round;
    border-image-repeat: repeat;
}

Codepen Ön izleme

See the Pen <a href='http://codepen.io/w3tr/pen/NGeyPj/'>border-image-repeat</a> by W3TR (<a href='http://codepen.io/w3tr'>@w3tr</a>) on <a href='http://codepen.io'>CodePen</a>.

Css Sözdizimi

Değer	Açıklama
stretch	Varsayılan değer. Görüntü alanını kaplayacak şekilde genişletilir.
repeat	Görüntü alanını sınırlanan bölge kadar tekrar eder.
round	Görüntünün iki noktası arasındaki bölgesi tekrarlanmasını sağlar.
İnital
İnherit

Tarayıcı Desteği


15.0	15.0	11.0	6.0	15.0

Posted on 13 Kasım 201525 Kasım 2015 by Samed GÖZÜTOK 0

CSS border-image-outset

border-image-outset :

border-image-outset özelliği, border ‘ ın belirtilen boyuttan ne kadar dışarı taşacağını beliritir.

Örnek

#borderimage{
        -webkit-border-image: url(http://w3tr.com/file/border.png) 50 round;
    -o-border-image: url(http://w3tr.com/file/border.png) 50 round; 
    border-image: url(http://w3tr.com/file/border.png) 50 round;;
      border-image-outset: 10px;}

Codepen Ön izleme

See the Pen <a href='http://codepen.io/w3tr/pen/KdbZGm/'>border-image-outset</a> by W3TR (<a href='http://codepen.io/w3tr'>@w3tr</a>) on <a href='http://codepen.io'>CodePen</a>.

Css Sözdizimi

Değer	Açıklama
length	Ne kadar taşacağını belirler. Varsayılan değer 0 ‘ dır.
number	Borderların sıralamasına göre uzaklık atamamızı sağlar.
İnital
İnherit

Tarayıcı Desteği


15.0	15.0	11.0	6.0	15.0

Posted on 13 Kasım 201525 Kasım 2015 by Samed GÖZÜTOK 0

HTML, CSS

border-right :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

Border-radius :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

border-left-width :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

Border-left-style :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

Border-left-color :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

Border-left :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

border-image-width :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

border-image-source :

örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

border-image-repeat :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

border-image-outset :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği