Yazar: Samed GÖZÜTOK

CSS border-image

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.

Örnek

#borderimage1{
   -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;
}
#borderimage2{
  -webkit-border-image: url(http://w3tr.com/file/border2.png) 50 round;
   -o-border-image: url(http://w3tr.com/file/border2.png) 50 round; 
   border-image: url(http://w3tr.com/file/border2.png) 50 round;
}

Codepen Ön izleme

Css Sözdizimi

Değer Açıklama
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
İnherit

Tarayıcı Desteği
16.0
4.0-webkit		 15.0
3.5-moz		 11.0 6.0
3.1-webkit		 15.0
11.0 -o
Posted on by Samed GÖZÜTOK 0

CSS border-color

border-color :

Border-color özelliği bir elementin dört sınırlarının rengini ayarlar. Bu özellik bir ila dört değerlere sahip olabilir.

Not: border-color özelliğinden önce border-style özelliğinin tanımlanmış olması gerekir.

Örnek

p.tekli {
    border-style: solid;
    border-color: #0000ff;
}

p.ikili {
    border-style: solid;
    border-color: #ff0000 #0000ff;
}

p.uclu {
    border-style: solid;
    border-color: #ff0000 #00ff00 #0000ff;
}

p.dortlu {
    border-style: solid;
    border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255);
}

Codepen Ön izleme

Css Sözdizimi

Değer Açıklama
color Arkaplan rengini belirler varsayılan değer siyahtır.
transparent Rengin şeffaf olması gerektiğini belirtir.
İnital
İnherit

Tarayıcı Desteği
1.0 1.0 4.0 1.0 3.5
Posted on by Samed GÖZÜTOK 0

CSS border-collapse

border-collapse :

border-collapse özelliği, table ve içindeki sutunlar için ayrı ayrı border tanımlamamızı olanak sağlar.

Örnek

table {
    border-collapse: collapse;
}

table, td, th {
    border: 1px solid blue;
}

Codepen Ön izleme

Css Sözdizimi

 

Değer Açıklama
separate Değerlere boşluk ayırt etmeden border verilmesini sağlar.
collapse Genel tabloya border verilir sadece.
İnital
İnherit

Tarayıcı Desteği

 
1.0 1.0 5.0 1.2 4.0
Posted on by Samed GÖZÜTOK 0

CSS border-bottom-width

css border-bottom-width :

border-bottom-width özelliği, border ‘ ın genişlik boyutunu tanımlamamızı sağlar.
Not: border ‘ ın width özelliğini belirtmeden önce kesinlikle border-style özelliği verilmelidir.

Örnek

#border-bottom-width{
     border-style: solid;
    border-bottom-width: 10px;
    color: blue;
}

Codepen Ön izleme

Css Sözdizimi

 

Değer Açıklama
medium varsayılan değer.
thin ince bir sınır sitilini vermemizi sağlar.
thick ince bir sınır sitilini vermemizi sağlar.
length Nokta biçiminde stil verir.
İnital
İnherit

 

Tarayıcı Desteği

 
1.0 1.0 4.0 1.0 3.5
Posted on by Samed GÖZÜTOK 1

CSS border-bottom-style

border-bottom-style:

Uygulanan elementin alt kenarlığına stil vermemizi sağlar.

Örnek:

#border-bottom-style{
  width:50%;
  height: 100px;
  text-align: center;
  border: 3px solid #000;
  border-bottom-style: dashed;
}

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

Css Sözdizimi

Değer Açıklama
none Hiçbir değer verilmez. Varsayılan değerdir.
hidden None değeriyle aynı işlevi görür. Stil verilmemiş sayılır.
dotted Nokta biçiminde stil verir.
dashed Kesik çizgiler halinde stil verir.
solid Düz çizgi halinde stil verir.
double Düz iki çizgi olarak stil verir.
groove Görüntü olarak oyma stili verir.
ridge Çıkıntılı bir sınır gibi stil verir.
inset İçe doğru stil verir.
outset 3D kabartmalı bir sınır olarak stil verir.
initial
inherit

Tarayıcı Desteği
1.0 1.0 5.5 1.0 9.2
Posted on by Samed GÖZÜTOK 1

CSS border-bottom-right-radius

border-bottom-right-radius:

Uygulanan elementin sağ alt köşesine yuvarlak bir görünüm vermemizi sağlar.

Örnek:

#border-bottom-right-radius{
  width: 50%;
  height: 100px;
  text-align: center;
  border: 3px solid #000;
  border-bottom-right-radius: 2em;
}

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

Css Sözdizimi

Değer Açıklama
length Sol alt köşede şeklini tanımlar . Varsayılan değer 0’dır.
% % Olarak sağ alt köşesinde şeklini tanımlar.
inital
inherit

Tarayıcı Desteği
5.0
4.0-webkit		 4.0
3.0 -moz		 9.0 5.0
3.1 -webkit		 10.5
Posted on by Samed GÖZÜTOK 0

CSS border-bottom-left-radius

border-bottom-left-radius:

Uygulanan elementin sol alt köşesine yuvarlak bir görünüm vermemizi sağlar.

Örnek:

#border-bottom-left-radius{
  width: 50%;
  height: 100px;
  text-align: center;
  border: 3px solid #000;
  border-bottom-left-radius: 2em;
}

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

Css Sözdizimi

Değer Açıklama
length Sol alt köşede şeklini tanımlar . Varsayılan değer 0’dır.
% % Olarak sol alt köşesinde şeklini tanımlar.
inital
inherit

Tarayıcı Desteği
5.0
4.0-webkit		 4.0
3.0 -moz		 9.0 5.0
3.1 -webkit		 10.5
Posted on by Samed GÖZÜTOK 0

CSS border-bottom-color

border-bottom-color:

border-bottom-color özelliği, border rengini değiştirebilmek için kullanılır.

Örnek:

#border-bottom-color{
  width:100%;
  height: 100px;
  border: 5px solid black;
  border-bottom-color: red;
}

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

Css Sözdizimi

Değer Açıklama
color Arka plan rengini belirler. Varsayılan değeri elementin rengidir.
transparent Border’ın renginin şeffaf olması gerektiğini belirtir.
initial
inherit

Tarayıcı Desteği
1.0 1.0 4.0 1.0 3.5
Posted on by Samed GÖZÜTOK 0

CSS border-bottom

border-bottom:

HTML elemanlarının alt kenarına istenilen şekilde, renkte ve ölçüde kenarlık eklememizi sağlar.

Örnek:

#border-bottom{
  width: 100%;
  height: 100px;
  border-bottom: 5px solid red;
}

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

Css Sözdizimi

Değer Açıklama
border-bottom-width Sınırın genişliğini belirtir. Varsayılan değeri medium.
border-bottom-style Sınırın sitilini belirtir. Varsayılan değeri none.
border-bottom-color Sınırın rengini belirtir. Varsayılan değer elementin rengini alır.
initial
inherit

Tarayıcı Desteği
1.0 1.0 4.0 1.0 3.5
Posted on by Samed GÖZÜTOK 0

CSS border

border:

Border, HTML elemanlarının kenarlarına istenilen şekilde, renkte ve ölçüde kenarlık eklememizi sağlar.

Örnek:

#border{
  width: 50%;
  height: 100px;
  border: 10px solid red;
}

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

Css Sözdizimi

Değer Açıklama
border-width Sınırın genişliğini belirtir. Varsayılan değeri medium.
border-style Sınırın sitilini belirtir. Varsayılan değeri none.
border-color Sınırın rengini belirtir. Varsayılan değer elementin rengini alır.
initial
inherit

Tarayıcı Desteği
1.0 1.0 4.0 1.0 3.5
Posted on by Samed GÖZÜTOK 1