HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

CSS handleiding

CSS TUIS CSS Inleiding CSS-sintaksis CSS-keurders CSS Hoe om CSS Kommentaar CSS kleure
Colors RGB HEX HSL
CSS agtergronde
Background Color Background Image Background Repeat Background Attachment Background Shorthand
CSS-grense
Grense Grens breedte Rand Kleur Grenskante Grens Snelskrif Afgeronde grense
CSS-marges
Margins Margin Collapse
CSS Opvulling CSS Hoogte/Breedte CSS Box Model CSS uiteensetting
Outline Outline Width Outline Color Outline Shorthand Outline Offset
CSS teks
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
CSS lettertipes
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
CSS-ikone CSS skakels CSS-lyste CSS-tabelle
Table Borders Table Size Table Alignment Table Style Table Responsive
CSS vertoon CSS maksimum breedte CSS posisie CSS Z-indeks CSS oorloop CSS Float
Float Clear Float Examples
CSS Inline-blok CSS Belyn CSS-kombineerders CSS Pseudo-klas CSS Pseudo-element CSS Deursigtigheid CSS-navigasiebalk
Navbar Vertical Navbar Horizontal Navbar
CSS-aftrekkies CSS Beeldgalery CSS Beeld Sprites CSS Attr keurders CSS-vorms CSS-tellers CSS-webwerfuitleg CSS-eenhede CSS Spesifisiteit CSS !belangrik CSS Wiskunde funksies

CSS Gevorderd

CSS afgeronde hoeke CSS-randbeelde CSS agtergronde CSS kleure CSS-kleur sleutelwoorde CSS Gradiënte
Linear Gradients Radial Gradients Conic Gradients
CSS Shadows
Shadow Effects Box Shadow
CSS-tekseffekte CSS Web Fonts CSS 2D-transformasies CSS 3D-transformasies CSS-oorgange CSS-animasies CSS Tooltips CSS-stylbeelde CSS-beeldrefleksie CSS-objekpas CSS voorwerp-posisie CSS-maskering CSS-knoppies CSS-paginering CSS veelvuldige kolomme CSS-gebruikerskoppelvlak CSS veranderlikes
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
CSS-boksgrootte CSS-medianavrae CSS MQ Voorbeelde CSS Flexbox
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS reageer

RWD Inleiding RWD Uitsigpoort RWD-roosteraansig RWD Media Navrae RWD beelde RWD-video's RWD-raamwerke RWD-sjablone

CSS -rooster

Grid Intro Roosterhouer Rooster item

CSS SASS

SASS Tutoriaal

CSS voorbeelde

CSS-sjablone CSS voorbeelde css vasvra CSS Oefeninge CSS-sertifikaat

CSS Verwysings

CSS Verwysing CSS-keurders CSS-funksies CSS Verwysing Gehoor CSS Web veilige lettertipes CSS Animateerbaar CSS-eenhede CSS PX-EM-omskakelaar CSS kleure CSS-kleurwaardes CSS verstekwaardes CSS-blaaierondersteuning

CSS afgeronde grense

❮ Vorige Volgende ❯

CSS afgeronde grense

Die border-radiuseiendom word gebruik om afgeronde grense by 'n element te voeg:

Normale grens

Ronde rand

Ronder rand

Rondste grens

Voorbeeld

p {
  border: 2px solid red;
  border-radius: 5px;
}

Meer voorbeelde


Hierdie voorbeeld demonstreer 'n snelskrif-eienskap om al die eienskappe vir die boonste grens in een verklaring op te stel.


Hierdie voorbeeld demonstreer hoe om die styl van die onderste rand te stel.


Hierdie voorbeeld demonstreer hoe om die breedte van die linkerrand te stel.


Hierdie voorbeeld demonstreer hoe om die kleur van die vier grense te stel. Dit kan van een tot vier kleure hê.


Hierdie voorbeeld demonstreer hoe om die kleur van die regterrand te stel.

Toets jouself met oefeninge

Oefening:

Gebruik die grenskortskrif-eienskap om 'n "4px", "dotted", "rooi" rand vir die <p>-elemente te stel.

<style>
p {
  : ;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

Alle CSS-grenseienskappe

Property Description
border Sets all the border properties in one declaration
border-bottom Sets all the bottom border properties in one declaration
border-bottom-color Sets the color of the bottom border
border-bottom-style Sets the style of the bottom border
border-bottom-width Sets the width of the bottom border
border-color Sets the color of the four borders
border-left Sets all the left border properties in one declaration
border-left-color Sets the color of the left border
border-left-style Sets the style of the left border
border-left-width Sets the width of the left border
border-radius Sets all the four border-*-radius properties for rounded corners
border-right Sets all the right border properties in one declaration
border-right-color Sets the color of the right border
border-right-style Sets the style of the right border
border-right-width Sets the width of the right border
border-style Sets the style of the four borders
border-top Sets all the top border properties in one declaration
border-top-color Sets the color of the top border
border-top-style Sets the style of the top border
border-top-width Sets the width of the top border
border-width Sets the width of the four borders

❮ Vorige Volgende ❯