Hoe kan ik een CSS-rand slechts aan één kant instellen?

U kunt zien dat de container met succes is gemaakt:

Stap 3: Ga naar div Container

Ga nu naar de HTML div-container en open de klassenaam. Om dit te doen, een klassenkiezer ' # ” wordt gebruikt met de klassenaam.

Stap 4: Rand slechts aan één kant invoegen

Pas na toegang tot de div-container de onderstaande CSS-eigenschappen toe:

Hier:

• • “ grens-links is een afgekorte eigenschap voor het instellen van de breedte, stijl en kleur van de linkerrand.
  • “ achtergrond ” eigenschap wordt gebruikt voor het aanpassen van de achtergrondkleur van het element.
  • “ marge ” eigenschappen stellen de ruimte buiten de grens in.
  • “ breedte ” definieert de breedte van het element in een container.

De resulterende afbeelding toont de rand met slechts één zijde:

Methode 2: Rand aan alle kanten instellen met verschillende stijlen

Gebruik de bovenstaande HTML-code om de rand aan alle kanten met verschillende kleuren in te stellen. Open vervolgens de div-container met behulp van de id-naam en selector:

In de hierboven verstrekte code:

• • “ marge ” specificeert de lege ruimte buiten het element.
  • “ grensbreedte ” stelt de breedte in met verschillende waarden voor elke zijde. We hebben bijvoorbeeld verschillende waarden in pixels toegevoegd.
  • “ grensradius ” wordt gebruikt voor het maken van de ronde bocht van de rand.
  • “ border-stijl ” eigenschap wordt gebruikt voor het instellen van de stijl van de rand. In dit scenario worden vier verschillende soorten stijlen ingesteld voor elke zijde van de rand.
  • “ rand kleur ” eigenschap wordt gebruikt voor het toewijzen van de kleur aan de rand. Hier wordt de waarde voor elke zijde ingesteld als een andere kleur.

Als gevolg hiervan wordt de rand met verschillende stijlen aan elke kant toegepast:

In dit artikel heb je verschillende manieren geleerd om de CSS-rand aan één of meerdere kanten in te stellen.

Conclusie

Om de rand slechts aan één kant in te stellen, maakt u eerst een div met behulp van de '