CSS-randen en contouren zijn waardevolle hulpmiddelen voor webontwerpers die flair aan een site willen toevoegen. Ze zijn gemakkelijk te gebruiken als u eenmaal weet hoe ze werken en zijn veelzijdig genoeg om aan een breed scala aan behoeften te voldoen. Laten we eens kijken naar CSS-grenzen om te zien waar u moet beginnen.

Wat is het verschil tussen een rand en een omtrek in CSS?

CSS-contouren en randen vormen twee van de buitenste lagen van het CSS-boxmodel, zittend tussen grenzen en marges. Hoewel deze eigenschappen vergelijkbaar zijn, hebben ze verschillende waarden en doeleinden.

Ten eerste zitten CSS-contouren buiten de grenzen. Dit betekent dat ze kunnen overlappen met inhoud buiten het element waarop u ze toepast. Daarnaast veranderen CSS-randen de afmetingen van een element, maar contouren niet.

Als u moeite heeft met het visualiseren van rand- en omtrekstijlen, kunt u uw ontwikkelingstools van de browser om te debuggen hen.

CSS Border & Outline gedeelde eigendomswaarden

Ondanks hun verschillen delen CSS-grenzen en contouren enkele van hun waarden. De afkorting die u voor elk gebruikt, lijkt ook erg op elkaar.

CSS Border & Outline Shorthand

Net als andere complexe CSS-eigenschappen, hebben zowel randen als contouren steno beschikbaar. Beide eigenschappen delen hetzelfde formaat voor hun steno-opties en het ziet er zo uit.

grens: breedtestijlkleur;
overzicht: breedtestijlkleur;

Dit creëert regels die er zo uitzien wanneer ze in actie zijn. Natuurlijk dekt deze afkorting niet alle beschikbare waarden voor deze eigenschappen.

rand: 10px effen blauw;
omtrek: 20px effen rood;

Deze verkorte CSS-rand- en omlijningsregels resulteren in een dunne blauwe rand met een dikke rode omtreklijn.

Net als andere verkorte CSS-eigenschappen, kunt u ook individuele eigenschappen gebruiken om dezelfde resultaten te bereiken.

CSS border-width & outline-width

Rand- en omtrekbreedtes zijn optionele CSS-eigenschapswaarden die de dikte instellen van de randen en omtrekken die u gebruikt. Het formaat voor deze eigenschappen is hetzelfde.

omtrekbreedte: 20px;
randbreedte: 10px;

Met randen kunnen individuele breedtes worden ingesteld voor elke zijde van het element, maar contouren niet. In de volgende paragrafen leest u hier meer over.

CSS border-style & outline-style

CSS-randen en contouren zijn er in verschillende stijlen. Volle randen komen het meest voor, maar u kunt creatief worden met de manier waarop u randen en contouren gebruikt.

randstijl: effen;
omtrekstijl: gestippeld;

Aan het einde van dit artikel vindt u een volledige lijst van de verschillende CSS-rand- en kaderstijlen.

CSS border-color & outline-color

Net als bij andere op kleuren gebaseerde CSS-eigenschappen, accepteren randen en contouren alle legale CSS-kleuren. Dit omvat hex-codes, RGB-codes, verkorte kleuren en meer.

randkleur: blauw;
omtrekkleur: #ff0000;

U kunt ook kleurovergangen gebruiken bij het werken met CSS-randen en contouren.

CSS-grenseigenschapswaarden

Naast hun gedeelde eigendomswaarden hebben grenzen en contouren ook unieke waarden om te verkennen. CSS-randen hebben twee unieke eigenschappen die het leren waard zijn.

CSS border-radius

Door een straal aan de rand van een element toe te voegen, hebt u veel controle over de vorm ervan. Elke hoek van een element kan een andere straal hebben en deze eigenschap kan zelfs worden ingesteld als de randstijl op geen is ingesteld.

grensstraal: 20px;

U kunt een enkele waarde instellen om de straal van alle hoeken te wijzigen.

U kunt de hoeken ook splitsen in groepen van linksboven/rechtsonder en rechtsboven/linksonder.

grensstraal: 10px 20px;

Dit maakt het gemakkelijk om interessante vormen te maken met uw HTML-elementen.

Ten slotte kunt u elke hoek instellen op een eigen straal.

grensstraal: 10px 20px 30px 40px;

Deze waarden zijn met de klok mee van toepassing vanaf de linkerbovenhoek.

Eigenschappen aan de rand van de CSS

In tegenstelling tot contouren kunt u elke zijde van een rand zo instellen dat deze een unieke waarde heeft voor veel van zijn eigenschappen. Hierdoor is het mogelijk om elke zijde van je element een andere breedte te geven.

grens-links-breedte: 10px;
border-right-width: 20px;
rand-top-breedte: 30px;
rand-onder-breedte: 40px;

U kunt ook onafhankelijke CSS-randstijlen instellen voor elke zijde van een element.

border-links-stijl: effen;
border-right-style: gestippeld;
border-top-style: onderbroken;
border-bottom-stijl: dubbele;

En je kunt de kleur van elke kant veranderen als je dat wilt.

border-links-stijl: blauw;
border-right-stijl: #ff0000;
border-top-stijl: #00ff00;
border-bottom-stijl: rgb (0, 0, 255);

CSS-randzijden werken met de gewone afkorting om op deze manier te combineren.

border-links: 10px effen blauw;
grens-rechts: 20px gestippeld #00ff00;
border-top: 30px onderbroken #ff0000;
border-bottom: 40px dubbeleRGB(0, 0, 255);

CSS-overzichtseigenschapswaarden

Net als CSS-randen hebben contouren een unieke eigen eigenschap; omtrek-offset.

CSS omtrek-offset

Door een offset aan een omtrek toe te voegen, ontstaat er een ruimte tussen zichzelf en het hoofdelement. Deze verschuiving moet hetzelfde zijn voor elke zijde van de omtrek en de eigenschap accepteert slechts één waarde.

omtrek-offset: 10px;

Dit kan een handige manier zijn om een ​​derde rand voor uw elementen te gebruiken die overeenkomt met uw achtergrondkleur.

CSS-rand- en omtrekstijlen

Zowel randen als contouren hebben een stijl nodig om te werken. Er zijn tien beschikbare stijlen om uit te kiezen, inclusief randen die helemaal niet verschijnen.

randstijl: effen;
randstijl: gestippeld;
randstijl: onderbroken;
randstijl: groef;
randstijl: nok;
randstijl: dubbele;
randstijl: inzet;
randstijl: begin;
randstijl: verborgen;
randstijl: geen;

Randen hebben dezelfde stijlen als omtrekken, alleen als de omtrekstijl is ingesteld als eigenschap.

CSS-randen en contouren gebruiken

Contouren en randen zijn geweldige ontwerptools voor websitemakers. U kunt het uiterlijk van uw website definiëren met deze CSS-eigenschappen, maar u moet creatief zijn.