CSS Yuvarlak Köşeler

ByESiNTi · 23 Tem 2021

CSS Yuvarlak Köşeler

CSS border-radiusözelliği ile herhangi bir öğeye "köşeleri yuvarlatılmış" verebilirsiniz.

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

CSS border-radius Özellik

CSS border-radiusözelliği, bir elemanın köşelerinin yarıçapını tanımlar.

İpucu: Bu özellik, öğelere yuvarlatılmış köşeler eklemenizi sağlar!

İşte üç örnek:

1. Belirtilen arka plan rengine sahip bir öğe için yuvarlatılmış köşeler:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

2. Kenarlıklı bir öğe için yuvarlatılmış köşeler:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

3. Arka plan görüntüsüne sahip bir öğe için yuvarlatılmış köşeler:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

--------------------------------------------------------------------------------------------------------------------------------------------------

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

<!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
  border-radius: 25px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners2 {
  border-radius: 25px;
  border: 2px solid #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners3 {
  border-radius: 25px;
  background: url(paper.gif);
  background-position: left top;
  background-repeat: repeat;
  padding: 20px;
  width: 200px;
  height: 150px;
}
</style>
</head>
<body>

<h1>The border-radius Property</h1>

<p>Rounded corners for an element with a specified background color:</p>
<p id="rcorners1">Rounded corners!</p>
<p>Rounded corners for an element with a border:</p>
<p id="rcorners2">Rounded corners!</p>
<p>Rounded corners for an element with a background image:</p>
<p id="rcorners3">Rounded corners!</p>

</body>
</html>

--------------------------------------------------------------------------------------------------------------------------------------------

CSS border-radius - Her Köşeyi Belirt

border-radiusMülkiyet birinden dört değerlere sahip olabilir. İşte kurallar:

Dört değer - sınır yarıçapı: 15px 50px 30px 5px; (birinci değer sol üst köşeye, ikinci değer sağ üst köşeye, üçüncü değer sağ alt köşeye ve dördüncü değer sol alt köşeye uygulanır):

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Üç değer - sınır yarıçapı: 15px 50px 30px; (birinci değer sol üst köşeye, ikinci değer sağ üst ve sol alt köşelere ve üçüncü değer sağ alt köşeye uygulanır):

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

İki değer - border-radius: 15px 50px; (ilk değer sol üst ve sağ alt köşeler için geçerlidir ve ikinci değer sağ üst ve sol alt köşeler için geçerlidir):

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Bir değer - sınır yarıçapı: 15 piksel; (değer, eşit olarak yuvarlatılmış dört köşenin tümü için geçerlidir:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

İşte Kod:

Kod:

<!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
  border-radius: 15px 50px 30px 5px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners2 {
  border-radius: 15px 50px 30px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners3 {
  border-radius: 15px 50px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners4 {
  border-radius: 15px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}
</style>
</head>
<body>

<h1>The border-radius Property</h1>

<p>Four values - border-radius: 15px 50px 30px 5px:</p>
<p id="rcorners1"></p>

<p>Three values - border-radius: 15px 50px 30px:</p>
<p id="rcorners2"></p>

<p>Two values - border-radius: 15px 50px:</p>
<p id="rcorners3"></p>

<p>One value - border-radius: 15px:</p>
<p id="rcorners4"></p>

</body>
</html>

----------------------------------------------------------------------------------------------------------------------------------------------

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

<!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
  border-radius: 50px / 15px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners2 {
  border-radius: 15px / 50px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners3 {
  border-radius: 50%;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}
</style>
</head>
<body>

<h1>The border-radius Property</h1>

<p>Elliptical border - border-radius: 50px / 15px:</p>
<p id="rcorners1"></p>

<p>Elliptical border - border-radius: 15px / 50px:</p>
<p id="rcorners2"></p>

<p>Ellipse border - border-radius: 50%:</p>
<p id="rcorners3"></p>

</body>
</html>

ByESiNTi · 9 Ağu 2021

günceldir..

Kehanet · 9 Ağu 2021

Paylaşım için teşekkürler, ellerine sağlık

ByESiNTi · 19 Ağu 2021

xKehanet' Alıntı:
Paylaşım için teşekkürler, ellerine sağlık

Rica Ederim..Yorum İçin Teşekkürler..

CSS Yuvarlak Köşeler

ByESiNTi

ByESiNTi TURKMMO