Utviklere kan bruke flere CSS -egenskaper for å gjøre websidene sine mer attraktive, som "høyde”Og“bredde”Egenskaper for innstillingsstørrelse,”Tekstalign”For å justere tekst,”grensestil”Og“Border-Radius”Egenskaper for å sette grensen rundt elementet. I tillegg kan du legge til en kant i henhold til dine krav, for eksempel på den ene siden av elementet, bare for å gjøre ting bak objektene mer synlige.

Dette innlegget vil demonstrere:

• • Metode 1: Sett kant på den ene siden
  • Metode 2: Sett kant på alle sider med forskjellige stiler

Metode 1: Sett kant på den ene siden

I CSS kan brukere sette grensen på den ene siden av ønsket element. For dette formålet, "grense-venstre”,“Grense-høyre”,“grensen”Og“Border-Bottom”Egenskaper brukes til å legge til grenser til venstre, høyre, øverste eller bunnsiden.

I denne delen vil vi spesifikt sette grensen på venstre side av beholderen. For å gjøre det, følg de under-nevnte instruksjonene.

Trinn 1: Lag en div container

Først må du lage en DIV -beholder ved hjelp av "" stikkord. Sett inn en “id”Attributt og tilordne et navn til IDen.

Trinn 2: Sett inn overskrift

Neste, bruk "<H1>”Tag for å legge til en overskrift inne i Div -beholderen. Dessuten kan du også bruke andre overskriftskoder i henhold til kravet, for eksempel "<H1>" til "<h6>”Tagger:

Grensen på den ene siden

Det kan sees at beholderen er opprettet med hell:

Trinn 3: Access Div Container

Få tilgang til HTML DIV -beholderen, og få tilgang til klassenavnet. For å gjøre det, en klassevelger “#”Brukes med klassenavnet.

Trinn 4: Bare sett grensen på den ene siden

Etter tilgang til DIV-beholderen, bruk de under-nevnte CSS-egenskapene:

#main-div
grense-venstre: 5px solid rød;
Bakgrunn: RGB (56, 239, 245);
Margin: 20px 100px;
Bredde: 200px; Høyde: 150px

Her:

• • “grense-venstre er en shorthand-eiendom for å sette grense-venstre bredde, stil og farge.
  • “bakgrunn”Eiendom brukes til å justere bakgrunnsfargen på elementet.
  • “margin”Egenskaper setter plassen utenfor grensen.
  • “bredde”Definerer elementets bredde størrelse i en beholder.

Det resulterende bildet viser bare grensen til den ene siden:

Metode 2: Sett kant på alle sider med forskjellige stiler

For å sette grensen på alle sider med forskjellige farger, bruk ovennevnte HTML -kode. Få tilgang til DIV -beholderen ved hjelp av ID -navnet og velgeren:

#main-div
Margin: 80px;
Borderbredde: 8px 2px 1px 10px;
Border-Radius: 50px;
Border-stil: innsatt solid dobbelt prikket;
Borderfarge: RGB (40, 5, 235) RGB (238, 146, 9) RGB (255, 0, 242) RGB (19, 19, 18);

I ovennevnte kode:

• • “margin”Angir det blanke rommet utenfor elementet.
  • “grensebredde”Angir bredden med forskjellige verdier for hver side. For eksempel har vi lagt til forskjellige verdier i piksler.
  • “Border-Radius”Brukes for å lage den runde kurven på grensen.
  • “grensestil”Eiendom brukes til å sette stilen på grensen. I dette scenariet er fire forskjellige typer stiler satt for hver side av grensen.
  • “grensefarge”Eiendom brukes til å tildele fargen til grensen. Her settes verdien for hver side som en annen farge.

Som et resultat vil grensen til forskjellige stiler på hver side bli brukt:

I denne artikkelen har du lært forskjellige måter å sette CSS -grensen på en og flere sider.

Konklusjon

For å sette grensen bare på den ene siden, først, opprette en div ved hjelp av "”Element. Deretter får du tilgang til DIV -beholderen og bruk CSS -egenskapene. Bruk deretter enhver eiendom blant disse, inkludert "grense-venstre”,“Grense-høyre”,“grensen”Og“Border-Bottom”For å sette den ene sidegrensen. Videre kan brukere også angi “grensebredde”,“grensestil”Og“grensefarge”Separat på hver side av grensen. Dette innlegget forklarte metoden for bare å sette CSS -grensen på den ene siden.