Stylizacja jest ważną częścią rozwoju strony internetowej HTML, a CSS zapewnia różne style elementów HTML; Jednym z nich jest stworzenie granicy wokół dowolnego elementu. Głównie służy do rozróżniania odcinków za pomocą kształtów granicznych, takich jak stałe, przerywane, kropkowane i podwójne.

Celem tego podręcznika jest wyjaśnienie, jak tworzyć granice okrągłego rogu. Po pierwsze, musimy wiedzieć o „granica" nieruchomość. Więc zacznijmy!

Czym jest nieruchomość „graniczna” w CSS?

Aby utworzyć granicę wokół elementu, musisz użyć „granica" nieruchomość. Korzystając z tej właściwości, możesz ustawić „styl”,„kolor", I "szerokość”Granicy.

Składnia

Składnia właściwości granicznej podano jako:

Border: Kolor stylu szerokości

Oto opis powyższych wartości:

• szerokość: Służy do ustawienia szerokości granicy.
• styl: Służy do ustawiania stylu granicznego, takiego jak kropkowane, przerywane, solidne lub podwójne.
• kolor: Określa kolor granicy.

Oto przykład, w którym wdrażamy „granica" nieruchomość.

Jak tworzyć granicę za pomocą CSS?

Aby utworzyć granicę, najpierw dodaj element w pliku HTML. Aby to zrobić, utworzymy a i przypisujemy „narożnik„Klasa do tego. Następnie dodamy nagłówek i akapit za pomocą

I

Tagi:

Wskazówka Linux

Okrągłe rogi w CSS

Następnie przejdziemy do sekcji CSS.

Tutaj ".narożnik”Służy do dostępu do klasy przypisanej do . Następnie utworzymy granicę za pomocą „granica”Właściwość i przypisz wartości szerokości, stylu i koloru jako„4px”,„solidny", I "RGB (248, 6, 107)”Odpowiednio. Ponadto dodamy szerokość „250px", wysokość "150px”Oraz kolor tła„RGB (234, 0, 255)„Dla Div:

.narożnik
granica: 4px stały RGB (248, 6, 107);
szerokość: 250px;
Wysokość: 150px;
kolor tła: RGB (234, 0, 255);

Po wdrożeniu wyżej wymienionego kodu przejdź do pliku HTML i wykonaj go. Zobaczysz następujący wynik:

Teraz przejdziemy do następnej części, gdzie utworzymy kwadratową granicę do obrzeż.

Jak za pomocą CSS za pomocą CSS?

Aby stworzyć okrągłą granicę, „Radiusz graniczny„Wykorzystana jest właściwość, w której można ustawić promień rogu zgodnie z twoimi preferencjami.

Składnia

Składnia właściwości Radiusza granicznego podano poniżej:

Radiusz graniczny: wartość

Kontynuujmy poprzedni przykład i ustaw promień graniczny, aby osiągnąć okrągłe rogi.

Przykład

W ".narożnik„Klasa pliku CSS, ustaw wartość„Radiusz graniczny„Nieruchomość jako„30px”:

Radiusz graniczny: 30px;

Z dodaną powyższą linią otrzymasz następujące dane wyjściowe:

Powyższe dane wyjściowe oznacza, że ​​granice są z powodzeniem zmieniane w okrągłe rogi z powodu właściwości promieniowania granicznego.

Wniosek

W CSS „Radiusz graniczny„Własność jest wykorzystywana do zmiany narożnika granic. Kształt krzywej zmienia się według danej wartości promienia. Korzystając z wymienionej właściwości, możesz ustawić promień rogu zgodnie z wyborem. W tym artykule wyjaśniliśmy, jak przybrzeżne granice za pomocą właściwości granicznej za pomocą przykładu.