CSS ile Köşeleri Oval Yapma (Border-Radius Kullanımı)

sdkbyrm · 23 Aralık 2020

Bu yazımızda CSS ile border-radius ile kutu köşelerini veya istenilen bir etiketin köşelerini ovalleştiren bir örnek oluşturacağız. Örneğimizde border-radius kullanımının çeşitli yöntemlerini kullanacağız.

Örneğimize ait .html ve .css kodlarını vermeden önce oluşacak şekle göz atalım. (Resmin üzerine tıklayarak büyütebilirsiniz.)

Örneğimizde kenar ovalleştirme yani radius-border işlemini tüm köşeler gibi yapılacağı gibi ayrı ayrı sol üst köşe, sağ üst köşe, sol alt köşe gibi yumuşatma işlemlerini gerçekleştirebileceğimizi görüyoruz. Ayrıca istersek görüleceği gibi img etiketine de uygulayarak resmin daire şeklinde kullanılabilmesini sağlayabiliriz.

border_ornek.html dosyasının içeriği:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<!DOCTYPE html>
<html>
<head>
<title>www.yazilimkodlama.com</title>
<link href="border.css" rel="stylesheet">
<meta charset="utf-8">
</head>
<body>

<div class="tum-kenar">Border-radius kullanarak tüm kenarları oval yapma.</div>
<div class="sol-ust">Border-radius kullanarak sol üst kenarı oval yapma</div>
<div class="sol-alt">Border-radius kullanarak sol alt kenarı oval yapma</div>
<div class="sag-ust">Border-radius kullanarak sol üst kenarı oval yapma</div>
<div class="temizle"></div>
<div class="sag-alt">Border-radius kullanarak sağ üst kenarı oval yapma</div>
<div class="sol-sag-ust">Border-radius kullanarak sol ve sağ üst kenarı oval yapma</div>
<div class="sol-ust-sag-alt">Border-radius kullanarak sol üst ve sağ alt kenarı oval yapma</div>
<div class="sol-ust-sag-alt">Border-radius kullanarak sağ üst ve sol alt kenarı oval yapma</div>
<div class="temizle"></div>

<div class="yuvarla-bir"></div>
<div class="yuvarla-iki"></div>
<div class="yuvarla-uc"></div>
<div class="yuvarla-dort"></div>

<div class="temizle"></div>

<div class="yuvarla-uc"></div>
<div class="yuvarla-dort"></div>
<img class="resim" src="img/featured/1.jpg" alt="Resim">

</body>
</html>

border.css dosyası içeriği:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160

.tum-kenar {
border: 2px solid #a1a1a1;
padding: 10px 40px;
background: green;
width: 200px;
height: 100px;
border-radius: 25px;
color: white;
margin: 20px;
float: left;
}

.sol-ust{

border: 2px solid #a1a1a1;
padding: 10px 40px;
background: green;
width: 200px;
height: 100px;
border-top-left-radius: 25px;
color: white;
margin: 20px;
float: left;
}

.sol-alt{
border: 2px solid #a1a1a1;
padding: 10px 40px;
background: green;
width: 200px;
height: 100px;
border-bottom-left-radius: 25px;
color: white;
margin: 20px;
float: left;
}
.sag-ust{
border: 2px solid #a1a1a1;
padding: 10px 40px;
background: green;
width: 200px;
height: 100px;
border-top-right-radius: 25px;
color: white;
margin: 20px;
float: left;
}

.sag-alt{
border: 2px solid #a1a1a1;
padding: 10px 40px;
background: green;
width: 200px;
height: 100px;
border-bottom-right-radius: 25px;
color: white;
margin: 20px;
float: left;
}

.sol-sag-ust{
border: 2px solid #a1a1a1;
padding: 10px 40px;
background: green;
width: 200px;
height: 100px;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
color: white;
margin: 20px;
float: left;
}

.sol-ust-sag-alt{
border: 2px solid #a1a1a1;
padding: 10px 40px;
background: green;
width: 200px;
height: 100px;
border-top-left-radius: 25px;
border-bottom-right-radius: 25px;
color: white;
margin: 20px;
float: left;
}
.sag-ust-sol-alt{
border: 2px solid #a1a1a1;
padding: 10px 40px;
background: green;
width: 200px;
height: 100px;
border-top-right-radius: 25px;
border-bottom-left-radius: 25px;
color: white;
margin: 20px;
float: left;
}

.yuvarla-bir {
border-radius: 15px;
margin:10px;
float: left;
width: 150px;
height: 150px;
border:#0287D0 10px solid;
}
.yuvarla-iki {
border-radius: 25px 5px;
margin:10px;
float: left;
width: 150px;
height: 150px;
border:#A527D0 10px solid;
}
.yuvarla-uc {
border-radius: 10px 20px 30px 40px;
margin:10px;
float: left;
width: 150px;
height: 150px;
border:#02F78A 10px solid;
}
.yuvarla-dort {
border-radius: 0px 50% 50% 50%;
margin:10px;
float: left;
width: 150px;
height: 150px;
border:#665544 10px solid;
}

.yuvarla-bes {
border-radius: 80px/40px;
margin:10px;
float: left;
width: 150px;
height: 150px;
border:#aa22cc 10px solid;
}
.yuvarla-alti {
border-radius: 20px/150px;
margin:10px;
float: left;
width: 150px;
height: 150px;
border:#224433 10px solid;
}

.resim{
border-radius: 50%;
width:200px;
height: 200px;
float: left;
}

.temizle{
clear: both;
}

CSS ile Köşeleri Oval Yapma (Border-Radius Kullanımı)

sdkbyrm