Outline

Outline kenarlıkların dışına çizilen bir çerçevedir. Kenarlıklar gibi elemanın toplam boyutunu etkilemez.


outline-style

Bu özellik ile oluşturulacak outline çizgilerinin biçimi belirtilir. Girilebilecek değerlerden none varsayılan değerdir ve çizgi olmayacağını belirtir. hidden değeri de benzer şekilde outline çizgilerinin görünmez olacağı manasına gelir. solid değeri sürekli, dotted değeri noktalı, dashed değeri kesikli ve double değeri çift çizgiyi ifade eder. groove değeri outline çizgilerinin elemana kazınmış gibi görünmesini, ridge değeri outline çizgilerinin elemandan bir çıkıntı gibi görünmesini sağlar. outset değeri outline çizgilerinin elemanı ekrandan dışarı geliyor gibi göstermesini sağlarken inset değeri outline çizgilerinin elemanı ekrana gömülü gibi göstermesini sağlar.

<!DOCTYPE html>
<html>
<head>
<title>CSS Kutu Modeli</title>
<meta charset="UTF-8">
<style>
p.ornek1{
outline-style: none;
}
p.ornek2{
outline-style: solid;
}
p.ornek3{
outline-style: dashed;
}
p.ornek4{
outline-style: ridge;
}
p{
border: 5px solid green;
height: 100px;
}
</style>
</head>
<body>
    <p class="ornek1">Örnek Paragraf 1</p><br>
    <p class="ornek2">Örnek Paragraf 2</p><br>
    <p class="ornek3">Örnek Paragraf 3</p><br>
    <p class="ornek4">Örnek Paragraf 4</p><br>
</body>
</html>

outline-width

Bu özellik ile outline çizgilerinin kalınlıkları belirtilir. Bu özelliğin varsayılan değeri olan medium orta kalınlık manasına gelir. İnce çizgi için thin, kalın çizgi için thick değerleri kullanılabilir. Bunların yanında değer olarak uzunluk da girilebilir. Bu özellik ile yapılan biçimlendirmeler alt elemanlara aktarılmaz.

<!DOCTYPE html>
<html>
<head>
<title>CSS Kutu Modeli</title>
<meta charset="UTF-8">
<style>
p.ornek1{
outline-width: medium;
}
p.ornek2{
outline-width: thin;
}
p.ornek3{
outline-width: thick;
}
p.ornek4{
outline-width: 10px;
}
p{
border: 5px solid green;
outline-style: solid;
height: 100px;
}
</style>
</head>
<body>
    <p class="ornek1">Örnek Paragraf 1</p><br>
    <p class="ornek2">Örnek Paragraf 2</p><br>
    <p class="ornek3">Örnek Paragraf 3</p><br>
    <p class="ornek4">Örnek Paragraf 4</p><br>
</body>
</html>

outline-color

Bu özellik ile outline çizgilerinin rengi belirtilir. invert değeri arkaplan renginin kontrastı olan rengin kullanılacağını belirtir fakat bu değer yazının yazıldığı an itibarı ile sadece Internet Explorer ve Opera tarafından desteklenmektedir. Özelliğin karşısına renk değeri girildiğinde outline çizgileri bu rengi alır. Bu özellik ile yapılan biçimlendirmeler alt elemanları etkilemez.

<!DOCTYPE html>
<html>
<head>
<title>CSS Kutu Modeli</title>
<meta charset="UTF-8">
<style>
p.ornek1{
outline-color: red;
}
p.ornek2{
outline-color: #00FF00;
}
p.ornek3{
outline-color: blue;
}
p.ornek4{
outline-color: aqua;
}
p{
border: 5px solid green;
outline-style: solid;
height: 100px;
}
</style>
</head>
<body>
    <p class="ornek1">Örnek Paragraf 1</p><br>
    <p class="ornek2">Örnek Paragraf 2</p><br>
    <p class="ornek3">Örnek Paragraf 3</p><br>
    <p class="ornek4">Örnek Paragraf 4</p><br>
</body>
</html>

outline-offset

Bu özellik outline çizgilerinin kenarlıkların ne kadar uzağından itibaren çizileceğini belirler. Varsayılan durumda bu çizgiler kenarlıkların hemen bitişiğine çizilir. Girilecek değer uzunluk değeri olmalıdır. Bu özellik ile yapılan biçimlendirmeler alt elemanları etkilemez. Bu özellik yazının yazıldığı an itibarı ile Internet Explorer tarafından desteklenmemektedir.

<!DOCTYPE html>
<html>
<head>
<title>CSS Kutu Modeli</title>
<meta charset="UTF-8">
<style>
p.ornek1{
outline-offset: 0px;
}
p.ornek2{
outline-offset: 2px;
}
p.ornek3{
outline-offset: 4px;
}
p.ornek4{
outline-offset: 6px;
}
p{
border: 5px solid green;
outline-style: solid;
height: 100px;
}
</style>
</head>
<body>
    <p class="ornek1">Örnek Paragraf 1</p><br>
    <p class="ornek2">Örnek Paragraf 2</p><br>
    <p class="ornek3">Örnek Paragraf 3</p><br>
    <p class="ornek4">Örnek Paragraf 4</p><br>
</body>
</html>

outline

Bu özellik kullanılarak outline ile ilgili üç özellik birden tek seferde biçimlendirilebilir. Bu özellikle yapılan biçimlendirmeler de alt elemanlara aktarılmaz. Bu özelliğin kullanım formatı şu şekildedir:

outline: "outline-color değeri" "outline-style değeri" "outline-width değeri";

Bu değerlerden girilmeyenler yerine varsayılan değerler kullanılır.

<!DOCTYPE html>
<html>
<head>
<title>CSS Kutu Modeli</title>
<meta charset="UTF-8">
<style>
p.ornek1{
outline: red solid thin;
}
p.ornek2{
outline: yellow dashed thick;
}
p.ornek3{
outline: blue dotted 5px;
}
p.ornek4{
outline: gray double;
}
p{
border: 5px solid green;
height: 100px;
}
</style>
</head>
<body>
    <p class="ornek1">Örnek Paragraf 1</p><br>
    <p class="ornek2">Örnek Paragraf 2</p><br>
    <p class="ornek3">Örnek Paragraf 3</p><br>
    <p class="ornek4">Örnek Paragraf 4</p><br>
</body>
</html>