og

tags:

< legeme >

< div klasse = 'hjørne' >

< h1 > Linux tip < / h1 >

< s > Runde hjørner i CSS < / s >

< / div >

< / legeme >

Dernæst går vi til CSS-sektionen.

Her er ' .hjørne ” bruges til at få adgang til den klasse, der er tildelt

. Derefter vil vi oprette en grænse ved hjælp af ' grænse ' egenskab og tildel værdierne for bredde, stil og farve som ' 4px ', ' solid ', og ' rgb(248, 6, 107) ', henholdsvis. Desuden vil vi tilføje bredden ' 250 px ', højde ' 150 px ' og baggrundsfarve ' rgb(234; 0; 255) ” for div:

.hjørne {

grænse : 4px solid rgb ( 248 , 6 , 107 ) ;

bredde : 250 px ;

højde : 150 px ;

baggrundsfarve : rgb ( 2. 3. 4 , 0 , 255 ) ;

}

Når du har implementeret ovennævnte kode, skal du gå til HTML-filen og udføre den. Du vil se følgende resultat:

Nu vil vi gå til næste del, hvor vi vil oprette den firkantede grænse til den runde hjørnerammen.

Hvordan runder man hjørnet ved hjælp af CSS?

For at oprette en rund hjørneramme, skal ' grænse-radius ” egenskab bliver brugt, hvor du kan indstille radius af hjørnet i henhold til dine præferencer.

Syntaks

Syntaks for grænse-radius egenskaben er angivet nedenfor:

grænse-radius : værdi

Lad os fortsætte med det forrige eksempel og indstille grænseradius for at opnå runde hjørner.

Eksempel

i ' .hjørne ' klasse af CSS-filen, skal du indstille værdien af ​​' grænse-radius ' ejendom som ' 30 px ”:

grænse-radius : 30 px ;

Med ovenstående linje tilføjet, får du følgende output:

Det ovenfor givne output betyder, at grænser med succes ændres til runde hjørner på grund af grænse-radius-egenskaben.

Konklusion

I CSS ' grænse-radius ” egenskaben bruges til at ændre hjørnet af grænserne. Formen af ​​kurven ændres i henhold til den givne værdi af radius. Ved hjælp af den nævnte egenskab kan du indstille hjørnets radius efter dit valg. I denne artikel har vi forklaret, hvordan man afrunder hjørnegrænser ved hjælp af egenskaben border-radius ved hjælp af et eksempel.