Mange former kan brukes på vår webside for å lage et bedre design, for eksempel sirkler, firkanter, rektangler og mer. Disse formene kan opprettes ved hjelp av forskjellige CSS -egenskaper. Mer spesifikt er avrundede hjørner av boksen mer effektive enn spisse hjørner når de får øynene til å følge linjene lett.

Denne artikkelen vil diskutere prosedyren for å bruke CSS Border-Radius-eiendom for å lage esker med avrundede hjørner.

Hvordan lage bokser i HTML?

For å lage to bokser, legg til to klasse Div -elementer med navnene “Boks-1”Og“Boks-2”, Og legg til

Element med overskriften i hvert av Div -elementene som følger:

Eksempel Boks 1

Eksempel Boks 2

Bruk nå CSS -stiler på HTML -elementene.

Stil H1 -element

H1
polstring: 50px;

De

Elementet er utstyrt med polstringseiendommen som “50px”For å skape den spesifiserte ekstra plassen i overskriften.

Style Box-1 og Box-2 DIV-elementer

#Box-1,
#Box-2
Margin: 1px auto;
Bredde: 250px;
Høyde: 120px;
bakgrunnsfarge: sjokolade;
Font-størrelse: 10px;
Farge: Ghostwhite;

CSS-egenskapene som brukes på Box-1 og Box-2 DIV er beskrevet nedenfor:

• “bredde”Eiendom setter breddeegenskapen til 250px.
• “høyde”Eiendom brukes til innstillingen av høyden på elementet til 250px.
• “bakgrunnsfarge”Eiendom brukes til å spesifisere elementets bakgrunnsfarge.
• “skriftstørrelse”Eiendom brukes til innstilling av elementets skriftstørrelse.
• “farge”Eiendom brukes til innstilling av skriftfargen.

Ved å gi den ovennevnte koden, vil de opprettede boksene bli vist som følger:

Det kan observeres at det opprettes bokser, men hjørnene deres er fremdeles pekt. Avsnittet nedenfor vil forklare bruken av grensen-radius-eiendommen for å lage bokser med avrundede hjørner.

Hva er CSS Border-Radius-eiendom?

CSS “Border-Radius”Eiendom brukes til å definere elementets radius. Denne egenskapen kan bestå av en til fire verdier. Disse verdiene er forklart nedenfor.

Syntaks- én verdi

Border-Radius: Alle [ / alle];

Én verdisyntaks refererer til radius i alle fire hjørner av boksen.

Syntax3- To verdier

Border-Radius: Topp til venstre og nederst til høyre og nederst og bunn til venstre
[ / øverst til venstre og nederst til høyre og nede og nedre venstre];

To verdier syntaks spesifiser radius som den første verdien indikerer radius på topp-venstre og nedre høyre hjørner, og den andre verdien spesifiserer radius øverst til høyre og nederst til venstre hjørner.

Syntaks- Tre verdier

Border-Radius: Topp til venstre topp til høyre og nederst til venstre nederst til høyre
[ / øverst til venstre øverst til høyre og nederst til venstre nederst til høyre];

Tre verdier Syntaks Angir den første verdien representerer øverste venstre hjørne, den andre verdien indikerer øverste høyre og nedre venstre hjørner, og den tredje verdien gjelder nederst til høyre hjørne.

Syntaks- Fire verdier

Border-Radius: Topp til venstre øverste høyre nederst til høyre nederst til venstre
[ / øverst til venstre øverst til høyre nederst til høyre];

Fire verdier Syntaks Angir den første verdien brukes på øverste venstre hjørne, den andre verdien gjelder øverst til høyre hjørne, den tredje verdien gjelder nederst til høyre hjørne, og den fjerde verdien gjelder nederst til venstre hjørne.

Hvordan lage avrundede hjørnekasser ved hjelp av CSS?

Avsnittet nedenfor forklarer hvordan vi kan lage runde hjørnebokser.

Stilboks-1

#Box-1
bakgrunnsfarge: RGB (255, 183, 0);
Border-Radius: 100px 2px 100px 1px;

Boksen-1 DIV-elementet brukes med egenskaper som er beskrevet nedenfor:

• “bakgrunnsfarge”Eiendom brukes til å stille inn elementets bakgrunnsfarge.
• “Border-Radius”Med verdien som“100px 2px 100px 1px”Hvor 100px indikerer øverst til venstre hjørne, indikerer 2px øverst-høyre hjørne, 100px indikerer nederst til høyre hjørne, og 1px indikerer det nederste venstre hjørnet.

Style Box-2

#Box-2
Bakgrunnsfarge: Darkcyan;
Border-Radius: 30px;

Egenskapene som brukes på BOX-2 DIV-elementet er beskrevet nedenfor:

• “bakgrunnsfarge”Eiendom setter fargen på boksen-2 DIV-elementet med“Darkcyan”Farge.
• “Border-Radius”Eiendom med verdien som“30px”Angir boksradius til 30px fra alle fire hjørner.

Så for å endre kassens hjørner, kan verdiene til grensen-radius-eiendommen settes deretter. Ved å gi de ovennevnte CSS-stylingegenskapene til BOX-1 og BOX-2 DIV-elementer, vil resultatet se slik ut:

Vi har vellykket lært grensen-radius-eiendommen for å lage de runde hjørnene av enkelt- eller flere bokser.

Konklusjon

For å lage et bedre design for vår webside, kan forskjellige former brukes, for eksempel sirkler, firkanter, rektangler og mer kan opprettes med CSS. Boksene med avrundede hjørner kan opprettes i CSS ved å bruke CSS “Border-Radius”Eiendom. Denne artikkelen demonstrerte bruken av CSS Border-Radius for å lage bokser med avrundede hjørner med eksempler.