border-image:

Border-image özelliği bir elementin borderlarına resim ataması özelliğini kullanmamızı sağlar.
Not: border-color özelliğinden önce border-style özelliğinin tanımlanmış olması gerekir.

See the Pen xwxVBe by W3TR (@w3tr) on CodePen.


Varsayılan değeri: none 100% 1 0 stretch;
border-image: source slice width outset repeat|initial|inherit;

border-image-source =  Görüntünün yolunu belirtmek için kullanılır.
border-image-slice =  border bölümlerinin sınırlarını gösterir.
border-image-width =  border a verilen resmi genişliğini belirlememize olanak sağlar.
border-image-outset =  Belirlenen sınırın dışına, ötesine uzamasını sağlar.
border-image-repeat =  Verilen görüntünün kapladığı miktar boyunca tekrar etmesini sağlar.
İnital = Varsayılan değerine bu özelliğini ayarlar. Bir linkle anlatılacak. (Çünkü hepsinde aynı değer var)
İnherit = Bir linkle anlatılacak. (Çünkü hepsinde aynı değer var)

TARAYICI CRHOME İE FİREFOX SAFARİ OPERA
SÜRÜMÜ 16.04.0 -webkit- 11.0 15.03.5 -moz- 6.03.1 -webkit- 15.011.0 -o-
TARAYICI: ANDROİD CROME FOR ANDROİD FİREFOX MOBİLE İE MOBİLE OPERA MOBİLE SAFARİ MOBİLE
SÜRÜMÜ 2.1 ? ? ? Evet 3.2

border-image-outset:

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

See the Pen zvYqYp by W3TR (@w3tr) on CodePen.


Varsayılan değeri: 0;
border-image-outset: length | number | initial | inherit;

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 = Varsayılan değerine bu özelliğini ayarlar. Bir linkle anlatılacak. (Çünkü hepsinde aynı değer var)
İnherit = Bir linkle anlatılacak. (Çünkü hepsinde aynı değer var)

TARAYICI CHROME İE FİREFOX SAFARİ OPERA
SÜRÜMÜ 15.0 11.0 15.0 6.0 15.0
TARAYICI: ANDROİD CROME FOR ANDROİD FİREFOX MOBİLE İE MOBİLE OPERA MOBİLE SAFARİ MOBİLE
SÜRÜMÜ ? ? 15.0 Desteklenmiyor ? ?

border-image-repeat:

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

See the Pen dYyGEq by W3TR (@w3tr) on CodePen.


Varsayılan değeri: stretch;
border-image-repeat: stretch | repeat | round | initial | inherit;

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 = Varsayılan değerine bu özelliğini ayarlar. Bir linkle anlatılacak. (Çünkü hepsinde aynı değer var)
İnherit = Bir linkle anlatılacak. (Çünkü hepsinde aynı değer var)

TARAYICI CHROME İE FİREFOX SAFARİ OPERA
SÜRÜMÜ 15.0 11.0 15.0 6.0 15.0
TARAYICI: ANDROİD CROME FOR ANDROİD FİREFOX MOBİLE İE MOBİLE OPERA MOBİLE SAFARİ MOBİLE
SÜRÜMÜ ? ? 15.0 Desteklenmiyor ? ?

border-image-slice:

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

See the Pen yYLerV by W3TR (@w3tr) on CodePen.


Varsayılan değeri: stretch;
border-image-repeat: stretch | repeat | round | initial | inherit;

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 = Varsayılan değerine bu özelliğini ayarlar. Bir linkle anlatılacak. (Çünkü hepsinde aynı değer var)
İnherit = Bir linkle anlatılacak. (Çünkü hepsinde aynı değer var)

TARAYICI CHROME İE FİREFOX SAFARİ OPERA
SÜRÜMÜ 15.0 11.0 15.0 6.0 15.0
TARAYICI: ANDROİD CROME FOR ANDROİD FİREFOX MOBİLE İE MOBİLE OPERA MOBİLE SAFARİ MOBİLE
SÜRÜMÜ ? ? 15.0 Desteklenmiyor ? ?

border-image-source:

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

See the Pen qOBbgo by W3TR (@w3tr) on CodePen.


Varsayılan değeri: none;
border-image-source: none | image | initial | inherit;

none =   Varsayılan değer. Kullanılacak görüntü yok.
image =  Görüntün yolunu belirtir.
İnital = Varsayılan değerine bu özelliğini ayarlar. Bir linkle anlatılacak. (Çünkü hepsinde aynı değer var)
İnherit = Bir linkle anlatılacak. (Çünkü hepsinde aynı değer var)

TARAYICI CHROME İE FİREFOX SAFARİ OPERA
SÜRÜMÜ 15.0 11.0 15.0 6.0 15.0
TARAYICI: ANDROİD CROME FOR ANDROİD FİREFOX MOBİLE İE MOBİLE OPERA MOBİLE SAFARİ MOBİLE
SÜRÜMÜ ? ? 15.0 Desteklenmiyor ? ?

border-image-width:

border-image-width özelliği, border ‘ a verilen resmin ne genişlik boyunca olacağını belirtir.

See the Pen JYjGwp by W3TR (@w3tr) on CodePen.


Varsayılan değeri: 1;
border-image-width: number | % | auto | initial | inherit;

number = 4 kenar içinde width verilecek kenarın hangi kenar olduğunu belirtir.
% = Yüzdeli değerler ile genişlik verir.
auto = Yüzdeli değerler ile genişlik verir.
İnital = Varsayılan değerine bu özelliğini ayarlar. Bir linkle anlatılacak. (Çünkü hepsinde aynı değer var)
İnherit = Bir linkle anlatılacak. (Çünkü hepsinde aynı değer var)

TARAYICI CHROME İE FİREFOX SAFARİ OPERA
SÜRÜMÜ 15.0 11.0 13.0 6.0 15.0
TARAYICI: ANDROİD CROME FOR ANDROİD FİREFOX MOBİLE İE MOBİLE OPERA MOBİLE SAFARİ MOBİLE
SÜRÜMÜ ? ? 13.0 Desteklenmiyor ? ?

Border-left:

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

See the Pen epYJLg by W3TR (@w3tr) on CodePen.


Varsayılan değer:  medium none color;
border-left: border-width border-style border-color|initial|inherit;

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.
inital = Varsayılan değerine bu özelliğini ayarlar. Bir linkle anlatılacak. (Çünkü hepsinde aynı değer var)
inherit = Bir linkle anlatılacak. (Çünkü hepsinde aynı değer var)

TARAYICI CROME İE FİREFOX SAFARİ OPERA
SÜRÜMÜ 1.0 4.0 1.0 3.5 1.0
TARAYICI: ANDROİD CROME FOR ANDROİD FİREFOX MOBİLE İE MOBİLE OPERA MOBİLE SAFARİ MOBİLE
SÜRÜMÜ 1.0 ? 1.0(1.0) Evet Evet evet

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.

See the Pen xwxZjX by W3TR (@w3tr) on CodePen.


Varsayılan değer:  Öğenin geçerli rengi.;
border-left-color: color | transparent | initial | inherit;

color = Sol kenarlık rengini belirtmek için kullanılır. Olası renk değerlerinin tam listesine http://www.w3schools.com/cssref/css_colors_legal.asp adresinden bakabilirisniz.
transparent = Sol kenarlık renginin transparan yapmak için kullanılır.
inital = Varsayılan değerine bu özelliğini ayarlar. Bir linkle anlatılacak. (Çünkü hepsinde aynı değer var)
inherit = Bir linkle anlatılacak. (Çünkü hepsinde aynı değer var)

TARAYICI CROME İE FİREFOX SAFARİ OPERA
SÜRÜMÜ 1.0 4.0 1.0 3.5 1.0
TARAYICI: ANDROİD CROME FOR ANDROİD FİREFOX MOBİLE İE MOBİLE OPERA MOBİLE SAFARİ MOBİLE
SÜRÜMÜ 1.0 ? 1.0(1.0) 6.5 11 1.0

Border-left-style:

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

See the Pen dYyGdm by W3TR (@w3tr) on CodePen.


Varsayılan değer: none;
border-left-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

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 = Varsayılan değerine bu özelliğini ayarlar. Bir linkle anlatılacak. (Çünkü hepsinde aynı değer var)
İnherit = Bir linkle anlatılacak. (Çünkü hepsinde aynı değer var)

TARAYICI CROME İE FİREFOX SAFARİ OPERA
SÜRÜMÜ 1.0 5.5 1.0 1.0 9.2
TARAYICI: ANDROİD CROME FOR ANDROİD FİREFOX MOBİLE İE MOBİLE OPERA MOBİLE SAFARİ MOBİLE
SÜRÜMÜ 2.3 Evet 14 7.0 Evet Evet

Border-left-width:

Elementin Sol kenarlık genişliğini  ayarlamak  için kullanılır.
Not: Her zaman için önce border-left-width  özelliklerini ayarlayınız. Rengi değiştirmek için önce border elementiniz olması gerekir.

See the Pen OyJMzq by W3TR (@w3tr) on CodePen.


Varsayılan değer: medium;
border-left-width: medium | thin | thick | length | initial | inherit;

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 = Varsayılan değerine bu özelliğini ayarlar. Bir linkle anlatılacak. (Çünkü hepsinde aynı değer var)
İnherit = Bir linkle anlatılacak. (Çünkü hepsinde aynı değer var)

TARAYICI CROME İE FİREFOX SAFARİ OPERA
SÜRÜMÜ 1.0 4.0 1.0 1.0 3.5
TARAYICI: ANDROİD CROME FOR ANDROİD FİREFOX MOBİLE İE MOBİLE OPERA MOBİLE SAFARİ MOBİLE
SÜRÜMÜ ? ? ? ? ? ?