თვისება border-radius

თვისება border-radius ქმნის მომრგვალებულ კუთხეებს საზღვრისა და ფონისთვის. თვისების მნიშვნელობა შეიძლება იყოს ნებისმიერი ზომის ერთეული. ნაგულისხმევი მნიშვნელობა: 0. წარმოადგენს შემდეგი თვისებების შემოკლებას: border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

სინტაქსი

სელექტორი {
	border-radius: მნიშვნელობა;
}

მნიშვნელობების რაოდენობა

თვისებას შეუძლია მიიღოს 1, 2, 3 ან 4 მნიშვნელობა, რომელიც მითითებულია გამოტოვებით:

რაოდენობა	აღწერა
`1`	ყველა კუთხისთვის ერთდროულად.
`2`	პირველი მნიშვნელობა ადგენს მომრგვალებას ზედა მარჯვენა და ქვედა მარცხენა კუთხეებისთვის, მეორე - ზედა მარცხენა და ქვედა მარჯვენა კუთხეებისთვის.
`3`	პირველი მნიშვნელობა ადგენს მომრგვალებას ზედა მარცხენა კუთხისთვის, მეორე - ერთდროულად ზედა მარჯვენა და ქვედა მარცხენა კუთხეებისთვის, ხოლო მესამე - ქვედა მარჯვენა კუთხისთვის.
`4`	პირველი მნიშვნელობა ადგენს მომრგვალებას ზედა მარცხენა კუთხისთვის, მეორე - ზედა მარჯვენა კუთხისთვის, მესამე - ქვედა მარჯვენა კუთხისთვის, ხოლო მეოთხე - ქვედა მარცხენა კუთხისთვის.

ელიფსური მომრგვალება

ორი მნიშვნელობა ხაზით გამოყოფილი ადგენს ელიფსურ მომრგვალებას. მნიშვნელობა ხაზის წინ მიუთითებს ჰორიზონტალურ მომრგვალებაზე, ხაზის შემდეგ კი ვერტიკალურ მომრგვალებაზე:

სელექტორი {
	border-radius: ჰორიზონტალური / ვერტიკალური;
}

თუ მითითებულია მომრგვალება რამდენიმე კუთხისთვის, მაშინ ხაზის წინ ჩამოთვლილია ყველა ჰორიზონტალური მომრგვალება, ხაზის შემდეგ კი - ყველა ვერტიკალური მომრგვალება.

მაგალითი

დავაყენოთ მომრგვალება 10px ყველა კუთხისთვის:

<div id="elem"></div>

#elem {
	border-radius: 10px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

მაგალითი

შევხედოთ, როგორ გამოიყურება მომრგვალება წერტილოვანი საზღვრის შემთხვევაში:

<div id="elem"></div>

#elem {
	border-radius: 10px;
	border: 1px dotted black;
	width: 300px;
	height: 100px;
}

მაგალითი

დავაყენოთ მომრგვალება 10px ერთი დიაგონალის კუთხეებისთვის, ხოლო მომრგვალება 40px - მეორე დიაგონალის კუთხეებისთვის:

<div id="elem"></div>

#elem {
	border-radius: 10px 40px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

მაგალითი

დავაყენოთ მომრგვალება 10px ზედა მარცხენა კუთხისთვის, მომრგვალება 30px ქვედა მარჯვენა კუთხისთვის, ხოლო მომრგვალება 50px - მეორე დიაგონალის კუთხეებისთვის:

<div id="elem"></div>

#elem {
	border-radius: 10px 50px 30px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

მაგალითი

დავაყენოთ განსხვავებული მომრგვალებები თითოეული კუთხისთვის:

<div id="elem"></div>

#elem {
	border-radius: 10px 30px 50px 70px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

მაგალითი

შევქმნათ ელიფსური მომრგვალება, 20px ჰორიზონტალური მომრგვალებისთვის, ხოლო 40px - ვერტიკალური მომრგვალებისთვის:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	border-radius: 20px / 40px;
	width: 300px;
	height: 100px;
}

მაგალითი

ახლა კი დავაყენოთ განსხვავებული ელიფსური მომრგვალება ყველა კუთხისთვის ცალ-ცალკე:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	border-radius: 20px 30px 20px 30px / 40px 60px 40px 60px;
	width: 300px;
	height: 100px;
}

მაგალითი

თუ კვადრატული ბლოკისთვის დავაყენებთ მომრგვალებას, რომელიც უდრის კვადრატის გვერდის ნახევარს, მივიღებთ წრეს:

<div id="elem"></div>

#elem {
	border-radius: 100px;
	border: 1px solid black;
	width: 200px;
	height: 200px;
}

მაგალითი

თუ დავაყენებთ მომრგვალებას, რომელიც კვადრატის გვერდზე მეტია, მაინც მივიღებთ წრეს:

<div id="elem"></div>

#elem {
	border-radius: 200px;
	border: 1px solid black;
	width: 200px;
	height: 200px;
}

მაგალითი

წრის მიღება ასევე შესაძლებელია, თუ დავაყენებთ border-radius 50%-ზე (უპირატესობა იმაში მდგომარეობს, რომ კვადრატის ზომის შეცვლისას არ მოგვიწევს მომრგვალების შეცვლა):

<div id="elem"></div>

#elem {
	border: 1px solid black;
	border-radius: 50%;
	width: 200px;
	height: 200px;
}

მაგალითი

თუ დავაყენებთ border-radius პროცენტებში მართკუთხედისთვის, მივიღებთ ელიფსურ მომრგვალებას. თუ სიგანე არის 400px, სიმაღლე 200px, ხოლო border-radius 10%-ზე, მაშინ ეს იგივეა, რაც 40px/20px:

<div id="elem"></div>

#elem {
	border-radius: 10%;
	border: 1px solid black;
	width: 400px;
	height: 200px;
}

მაგალითი

დავაყენოთ მნიშვნელობა border-radius 50%-ზე მართკუთხედისთვის - მივიღებთ ელიფსს:

<div id="elem"></div>

#elem {
	border-radius: 50%;
	border: 1px solid black;
	width: 400px;
	height: 200px;
}

მაგალითი

თვისება border-radius ამრგვალებს არა მხოლოდ საზღვრის, არამედ ფონის კუთხეებსაც:

<div id="elem"></div>

#elem {
	border-radius: 20px;
	width: 300px;
	height: 100px;
	background-color: #e4f1ed;
}

იხილეთ აგრეთვე

თვისება border,
რომელიც წარმოადგენს საზღვრის შემოკლებულ თვისებას