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

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:


<!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>

<!DOCTYPE html>

<html>

<head>

<title>www.yazilimkodlama.com</title>

</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="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>

</body>

</html>

border.css dosyası içeriği:


.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;
}

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;

}

Bunu paylaş:

Şunlar da Hoşunuza Gidebilir

Yorum yap X