Styling er en viktig del av HTML nettstedutvikling, og CSS gir forskjellige stiler for HTML -elementer; En av dem er å skape en grense rundt ethvert element. Stort sett brukes det til å skille mellom seksjoner ved bruk av grenseformer, for eksempel fast, stiplet, prikket og dobbelt.

Hensikten med denne håndboken er å forklare hvordan du kan lage runde hjørnegrenser. For dette må vi først vite om “grense”Eiendom. Så la oss begynne!

Hva er "grense" eiendom i CSS?

For å skape en grense rundt et element, må du bruke "grense”Eiendom. Ved å bruke denne eiendommen, kan du angi “stil”,“farge”, Og“bredde”Av grensen.

Syntaks

Syntaks for grenseegenskapen er gitt som:

Border: Bredde Stilfarge

Her er beskrivelsen av de ovennevnte verdiene:

• bredde: Det brukes til å sette bredden på grensen.
• stil: Det brukes til å sette grensestilen, for eksempel prikket, stiplet, solid eller dobbel.
• farge: Det bestemmer grensens farge.

Her er et eksempel der vi implementerer “grense”Eiendom.

Hvordan lage grense ved hjelp av CSS?

For å lage en grense, først, legg til et element i en HTML -fil. For å gjøre det, vil vi lage en og tildele en “hjørne”Klasse til det. Etter det vil vi legge til en overskrift og avsnitt ved hjelp av

og

Tagger:

Linux hint

Runde hjørner i CSS

Deretter vil vi flytte til CSS -delen.

Her, ".hjørne”Brukes til å få tilgang til klassen som er tilordnet . Etter det vil vi skape en grense ved å bruke “grense”Eiendom og tilordne verdiene for bredde, stil og farge som“4px”,“fast”, Og“RGB (248, 6, 107)”, Henholdsvis. Videre vil vi legge til bredden “250px”, Høyde”150px”, Og bakgrunnsfarge”RGB (234, 0, 255)”For div:

.hjørne
Grense: 4px Solid RGB (248, 6, 107);
Bredde: 250px;
Høyde: 150px;
bakgrunnsfarge: RGB (234, 0, 255);

Når du har implementert den ovennevnte koden, kan du gå til HTML -filen og utføre den. Du vil se følgende utfall:

Nå vil vi flytte til neste del, hvor vi vil skape den firkantede grensen til den runde hjørnegrensen.

Hvordan runde hjørne ved hjelp av CSS?

For å skape en runde hjørnegrense, “Border-Radius”Eiendom brukes, der du kan angi hjørnets radius i henhold til dine preferanser.

Syntaks

Syntaks av egenskapen Border-Radius er gitt nedenfor:

Border-Radius: Verdi

La oss fortsette det forrige eksemplet og sette grense-radius for å oppnå runde hjørner.

Eksempel

I “.hjørne”Klasse av CSS -filen, angi verdien av“Border-Radius”Eiendom som“30px”:

Border-Radius: 30px;

Med ovennevnte linje lagt til, vil du få følgende utdata:

Den ovennevnte produksjonen betyr at grenser blir endret til runde hjørner på grunn av grensen-radius-eiendommen.

Konklusjon

I CSS “Border-RadiusEiendom brukes til å endre hjørnet av grensene. Formen på kurven endres i henhold til den gitte verdien av radius. Ved hjelp av den nevnte egenskapen kan du stille inn hjørnets radius i henhold til ditt valg. I denne artikkelen har vi forklart hvordan du kan runde hjørnegrenser ved å bruke grensen-radius-eiendommen ved hjelp av et eksempel.