Border Radius გენერატორი

გადაათრიეთ სლაიდერები, რომ ჩამოაყალიბოთ გადახედვის ყუთის თითოეული კუთხე და დააკოპირეთ მიღებული border-radius CSS კოდი. დაბლოკეთ ოთხივე კუთხე ერთად მარტივი მომრგვალებული ოთხკუთხედისთვის, ან განბლოკეთ ისინი აბაზანის აბის ფორმის, ფოთლის ფორმის და ასიმეტრიული, ორგანული ფორმების შესაქმნელად.

რა არის ეს ხელსაწყო?

border-radius არის CSS თვისება, რომელიც ამრგვალებს ელემენტის კუთხეებს. ხელით დაწერისას იგი იღებს ოთხ მნიშვნელობას ფიქსირებული თანმიმდევრობით — ზედა-მარცხენა, ზედა-მარჯვენა, ქვედა-მარჯვენა, ქვედა-მარცხენა — რომლის არევა ადვილია, განსაკუთრებით მაშინ, როცა ოთხივე კუთხე განსხვავებულია.

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

რატომ გამოვიყენო ის?

ცოცხალი გადახედვა მყისიერად განახლდება გადათრევისას — CSS-ის რედაქტირება და შედეგის სანახავად გვერდის განახლება საჭირო არ არის.
ერთი დაწკაპუნებით ჩაკეტვა გავრცელებული 'ერთნაირი რადიუსი ყველა კუთხეზე' შემთხვევისთვის; განბლოკეთ აბაზანის აბის ფორმის ღილაკებისთვის, საუბრის ბუშტებისთვის და ბლობის ფორმებისთვის.
გამოაქვს შემოკლებული ერთმნიშვნელოვანი ფორმა, როცა ყველა კუთხე ემთხვევა, ან სრული ოთხმნიშვნელოვანი ფორმა, როცა არ ემთხვევა — ორივე შემთხვევაში მზადაა კოპირება-ჩასმისთვის.
მუშაობს მთლიანად თქვენს ბრაუზერში. თქვენ მიერ შეყვანილი არაფერი იგზავნება არსად.
უფასოა, რეგისტრაცია არ საჭიროებს, მუშაობს მობილურზეც.

როგორ გამოვიყენო

დატოვეთ 'ყველა კუთხის ჩაკეტვა' მონიშნული და გადაათრიეთ ნებისმიერი სლაიდერი მთელი ყუთისთვის ერთგვაროვანი რადიუსის დასაყენებლად.
მოხსენით ჩაკეტვა თითოეული კუთხის დამოუკიდებლად სამართავად — გამოსადეგია აბის ფორმის, ცრემლის ფორმის და ასიმეტრიული ბარათებისთვის.
დააკვირდით, როგორ განახლდება გადახედვის ყუთი ცოცხლად, სანამ თითოეულ სლაიდერს არეგულირებთ.
დააკოპირეთ გენერირებული CSS კოდი კოდის ველიდან და ჩასვით თქვენს სტილების ფაილში.

მაგალითი

შეყვანა

ზედა-მარცხენა: 40px, ზედა-მარჯვენა: 8px, ქვედა-მარჯვენა: 40px, ქვედა-მარცხენა: 8px

შედეგი

border-radius: 40px 8px 40px 8px;

ასეთი შეუსაბამო საპირისპირო კუთხეები ქმნის ფოთლის ან ჩურჩხელას ფურცლის სილუეტს — გავრცელებული ეფექტია ბარათებისა და ნიშნების დიზაინში.

px თუ % — რომელი ერთეული გამოვიყენო?

ეს გენერატორი გამოსცემს პიქსელურ მნიშვნელობებს, რაც სწორი ნაგულისხმევი არჩევანია UI-ის უმეტესი სამუშაოსთვის: ღილაკები, ბარათები და შეყვანის ველები, სადაც გსურთ ფიქსირებული, პროგნოზირებადი კუთხის რადიუსი, ელემენტის ზომის მიუხედავად.

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

გავრცელებული border-radius შაბლონები

მომრგვალებული ბარათი: ყველა კუთხე თანაბარი, დაახლოებით 8–16px UI კომპონენტებისთვის.
აბის ფორმის ღილაკი: დააყენეთ რადიუსი ელემენტის სიმაღლის ნახევარზე (ან უბრალოდ გამოიყენეთ 9999px, რომელიც ავტომატურად შემოსაზღვრავს სრულ აბის ფორმას სიმაღლის მიუხედავად).
წრიული ავატარი: border-radius: 50% კვადრატულ ელემენტზე (თანაბარი სიგანე და სიმაღლე).
საუბრის ბუშტი: სამი კუთხე მომრგვალებული, ერთი მკვეთრი — დააყენეთ სამი სლაიდერი მაღლა და ერთი 0-ზე.
ფოთლის / ჩურჩხელას ფურცლის ფორმა: საპირისპირო კუთხეები ემთხვევა, მიმდებარე კუთხეები განსხვავებულია — მაგ. ზედა-მარცხენა და ქვედა-მარჯვენა ორივე დიდი, ზედა-მარჯვენა და ქვედა-მარცხენა ორივე პატარა.

ჩრდილთან შერწყმა

მომრგვალებული კუთხეები იშვიათად ჩნდება მარტო — ბარათებსა და ღილაკებს ჩვეულებრივ სიღრმისთვის ცოტა ჩრდილიც სჭირდება. გამოიყენეთ Box Shadow გენერატორი ჩამოვარდნილი ჩრდილის დასარეგულირებლად და გამოიყენეთ ორივე გენერირებული CSS ნაწილი ერთსა და იმავე ელემენტზე.

→ Box Shadow გენერატორი

ხშირად დასმული კითხვები

რა განსხვავებაა border-radius-სა და კუთხეების თანმიმდევრობას შორის?

CSS-ის შემოკლებული ფორმა ყოველთვის მიჰყვება თანმიმდევრობას: ზედა-მარცხენა, ზედა-მარჯვენა, ქვედა-მარჯვენა, ქვედა-მარცხენა, საათის ისრის მიმართულებით, ზედა-მარცხენადან დაწყებული. ამ ხელსაწყოს ოთხი სლაიდერი შესაბამისად არის მონიშნული, ასე რომ თანმიმდევრობის დამახსოვრება არასდროს დაგჭირდებათ.

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

დიახ, ნამდვილ CSS-ში შეგიძლიათ შეურიოთ px, %, em და rem კუთხეებს შორის, თუმცა ეს პრაქტიკაში იშვიათია. ეს ხელსაწყო სიმარტივისთვის ერთგვაროვან px მნიშვნელობებს გენერირებს — შეცვალეთ ცალკეული მნიშვნელობა %-ით ან სხვა ერთეულით პირდაპირ თქვენს სტილების ფაილში, თუ შერეული ერთეულები გჭირდებათ.

რატომ ქმნის border-radius: 50% ზოგჯერ ოვალს წრის ნაცვლად?

იმიტომ, რომ პროცენტები დამოუკიდებლად ფარდობითია თითოეულ ღერძთან — ჰორიზონტალური რადიუსი არის ელემენტის სიგანის პროცენტი, ვერტიკალური რადიუსი — მისი სიმაღლის პროცენტი. კვადრატულ ელემენტზე (თანაბარი სიგანე და სიმაღლე) ეს ქმნის სრულყოფილ წრეს; ოთხკუთხედზე ქმნის ელიფსს.

მუშაობს თუ არა border-radius ფონურ სურათებზე და საზღვრებზეც?

დიახ — border-radius კვეთს ელემენტის ფონს, საზღვარს და (თანამედროვე ბრაუზერებში) მის box-shadow-ს მომრგვალებულ ფორმამდე. იგი არ კვეთს შვილობილ შემცველობას, რომელიც გადმოდის, თუ არ დააყენებთ ასევე overflow: hidden მშობელზე.

არის თუ არა შეზღუდვა, თუ რამდენად დიდი შეიძლება იყოს რადიუსი?

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

როგორ გავაკეთო აბის ფორმა ან სრულყოფილი წრე?

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