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

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

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

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

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

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

CSS background-clip

background-clip:

Obje arkaplanın boyanacak bölümünü belirler.

Örnek:

#background-clip {
    border: 10px dotted black;
    padding: 35px;
    background: yellow;
    background-clip: padding-box;
}

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

Css Sözdizimi

Değer Açıklama
padding-box Arkaplan görüntüsü kenarlığın tam sol üst köşesinden boyar.
border-box Arkaplan görüntüsü kenarlığı yok sayarak tam objenin köşesinden boyar. Yani border yokmuş gibi davranır.
content-box Arkaplan görüntüsü iç boşluğunun sol üst köşesinden boyar.
initial
inherit

Tarayıcı Desteği

4.0 4.0 9.0 3.0 10.5

CSS background-origin

background-origin:

Arkaplan görüntüsünün içeriğin neresinden başlayacağını belirtir.

Örnek:

#background-orgin {
    border: 2px solid black;
    height: 400px;
    width: 50%;
    background: url(http://lorempixel.com/400/200/city/);
    background-repeat: no-repeat;
    background-origin: content-box;
}

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

Css Sözdizimi

Değer Açıklama
padding-box Arkaplan görüntüsü kenarlığın tam sol üst köşesinden başlar.
border-box Arkaplan görüntüsü kenarlığı yok sayarak tam objenin köşesinden başlar. Yani border yokmuş gibi davranır.
content-box Arkaplan görüntüsü iç boşluğunun sol üst köşesinden başlatır.
initial
inherit

Tarayıcı Desteği

4.0 4.0 9.0 3.0 10.5

CSS background-size

background-size:

Bir arkaplan görüntüsünün boyutunu ayarlamamızı sağlar.

Örnek:

.background-size{
   background: url('http://lorempixel.com/80/60/city/');
    background-size: 80px 60px;
    background-repeat: no-repeat;
    height: 80px;
}

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

Css Sözdizimi

Değer Açıklama
auto Arkaplan boyutunu otomatik ayarlar.
length ilk değer ve ikinci değer genişliği ikinci değer yüksekliği ayarlar. Girilmeyen değer auto olarak tanımlarnır.
percentage yüzde olarak değerverilebilir. İlk değer genişlik ikinci değer yüksekliktir. Girilmeyen değer auto olarak alınır.
cover Arkaplan görüntüsünü tamamen kaplar. Fakat bazı görünmeyen bölgeler olacaktır. Ayrıca resmin küçük olması bu kaplamanın görüntüsünü bozabilir.
contain Arkaplan resmini cover gibi kaplar fakat belirtilen objenin içine sığacak en büyük haline getirir.
initial
inherit

Tarayıcı Desteği

4.0
1.0-webkit
4.0
3.6-moz
9.0 4.1
3.0-webkit
10.5
10.0-o

CSS background-attachment

background-attachment:

Nesneye verilen arkaplanın sabitlik durumunu ayarlamamızı sağlar.

Örnek:

body  {
    background-image: url('http://lorempixel.com/400/200/city/');
    background-repeat: no-repeat;
    background-attachment: fixed;
}

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

Css Sözdizimi

Değer Açıklama
scroll obje ile beraber arkaplan kayar. (Bu varsayılan değerdir.)
fixed Arkaplan görünüm açısından sabitlenir.
local Öğenin içeriği ile birlikte arkaplan kayar.
inital
inherit

Tarayıcı Desteği

1.0 1.0 4.0 1.0 3.5