Css dobbelt kant. Eksempler med forskellige CSS-grænser

Vlad Merzhevich

MED ved hjælp af CSS Du kan tilføje en kant til et element på flere måder. Grundlæggende bruges selvfølgelig grænseegenskaben, som den mest universelle, såvel som omrids og, overraskende nok, box-shadow , hvis hovedopgave er at skabe en skygge. Dernæst vil vi overveje disse metoder og deres forskelle indbyrdes.

skitsere ejendom

Den enkleste egenskab til at skabe rammer. Den har de samme parametre som border , men adskiller sig væsentligt i nogle detaljer:

• kontur vises rundt om elementet (kanten indeni);
• omridset påvirker ikke elementets dimensioner (grænsen tilføjes til elementets bredde og højde);
• kontur kan kun sættes rundt om hele elementet, men ikke på individuelle sider (kanten kan bruges til enhver side eller alle på én gang);
• kontur påvirkes ikke af den filetradius, der er angivet af grænse-radius-egenskaben (grænsen er påvirket).

Spørgsmålet opstår - i hvilke tilfælde er der behov for en disposition, når dens rolle trods de nævnte forskelle er fuldstændig overtaget af grænsen? Der er ikke mange situationer, men de opstår:

• skabe komplekse flerfarvede rammer;
• tilføjelse af en ramme til et element, når du holder musen over det;
• skjule den kant, som browseren automatisk tilføjer til nogle elementer, når den modtager fokus;
• for outline kan du indstille afstanden fra kanten af ​​elementet til rammen ved hjælp af egenskaben outline-offset for at oprette .

Flerfarvede rammer

Du skal forstå, at omridset på ingen måde erstatter grænse og nemt kan eksistere sammen med det, som vist i eksempel 1.

Eksempel 1: Oprettelse af en ramme

I dette eksempel tilføjes en sort ramme omkring elementet, som er adskilt fra baggrunden af ​​en hvid kant (fig. 1).

Ris. 1. Ramme rundt om elementet

Ramme ved brug af:hover

Når du tilføjer en ramme via border, øges bredden af ​​elementet, hvilket er ret mærkbart, når du kombinerer border og :hover pseudo-klassen. Der er to måder at "vinde" dette på. Det enkleste er at erstatte border med outline , der som bekendt ikke påvirker størrelsen af ​​elementet (eksempel 2).

Eksempel 2: Frame on Hover

kontur er ikke altid egnet, om ikke andet fordi afrunding af hjørner ikke påvirker det. Den anden metode er velegnet her - tilføj en usynlig ramme eller en ramme, der matcher baggrundsfarven, og skift derefter dens parametre, når du svæver (eksempel 3). Så sker der ingen forskydning af elementet, da rammen i første omgang allerede eksisterer. Men vi husker altid, at bredden af ​​elementet er summen af ​​værdierne af bredde, kant til venstre og kant til højre. Situationen er den samme med højden.

Eksempel 3: Frame on Hover

Kant omkring formularfelter

I nogle browsere (Chrome, Safari, seneste versioner Opera) vises en lille farvet ramme rundt om formularfelter, når de får fokus (fig. 2). For at fjerne det skal du blot tilføje værdien none til outline-egenskaben i typografierne, som vist i eksempel 4.

Ris. 2. Ramme rundt om marginerne

Eksempel 4. Afmontering af rammen

Rammer via box-shadow

Selvom egenskaben box-shadow er beregnet til at tilføje en skygge omkring et element, kan den også bruges til at oprette grænser, der ikke kan oprettes ved hjælp af border eller outline . Dette er alt takket være det faktum, at antallet af skygger kan være ubegrænset, hvis parametre er opført adskilt med kommaer.

For at få en ramme skal de første tre parametre indstilles til nul; de er ansvarlige for skyggens position og dens sløring. Den fjerde parameter i I dette tilfælde er ansvarlig for tykkelsen af ​​kanten, og den femte sætter farven på kanten. For den anden ramme er den fjerde parameter lig med summen af ​​tykkelserne af de to rammer.

Eksempel 4 viser, hvordan man tilføjer to rammer og en kant til højre ved hjælp af en enkelt box-shadow-egenskab.

Eksempel 4: Brug af box-shadow

Resultat dette eksempel vist i fig. 3.

Ris. 3. Rammer oprettet af egenskaben box-shadow

For at kontrollere grænsen for et element skal du bruge den generiske grænseegenskab. Denne egenskab giver dig mulighed for at indstille tykkelsen, stilen og farven på et elements kant i en enkelt erklæring.

Disse tre egenskaber (kanttykkelse, kantstil og farve) kan indstilles i en enkelt erklæring. Her er et eksempel:

Du kan kun angive en kantstil på den ene side af et element. For at gøre dette skal du bruge egenskaberne border-top (øverste kant), kant-højre (højre kant), kant-bund (nederste kant), kant-venstre (venstre kant).

I dette eksempel har hver side af blokken en anden kanttykkelse, stil og farve.

Tænk på, hvordan du kan skabe en form som denne ved hjælp af CSS:

Kantværdier - tykkelse, stil og farve - kan indstilles separat ved hjælp af specielle egenskaber.

• border-style - border style.
• border-width - border width.
• border-color - kantfarve.

Lad os overveje hver af værdierne separat.

ejendom i grænsestil Border stil.

Egenskaben border-style angiver stilen for grænsen. I CSS, i HTML forskelle, kan grænsen af ​​et grundstof ikke kun være fast. Følgende værdier accepteres for kantstilen:

1. ingen - ingen grænse (standard).
2. fast - fast kant.
3. dobbelt - dobbelt kant.
4. stiplet - stiplet kant.
5. prikket - en kant lavet af en række prikker.
6. ridge - "ridge" kant.
7. rille - "rille" grænse.
8. indsat - nedtrykt kant.
9. start - ekstruderet kant.

Eksempler på hvordan de ser ud.

ingen grænse (ingen)

fast grænse

dobbelt grænse

kant af en række prikker (prikket)

stiplet grænse

rillekant

højderyg grænse

indrykket kant (indsat)

ekstruderet kant (start)

Hvis du i øvrigt indstiller kantfarven til sort for rygningsrammen, får du dette resultat.

En div blok med sort kant og ryg stil.

Rammen ser solid ud, men det er fordi rygstilen er skabt ved at tilføje en sort skyggeeffekt, og den sorte effekt er ikke synlig på en sort ramme.

Ved at bruge egenskaben border-style kan kantstilen indstilles ikke kun for alle sider af blokken. Det er muligt at indstille flere værdier for en kant-stil-egenskab; afhængigt af antallet af værdier, vil kant-stilen blive tildelt et andet antal sider af blokken. Du kan indstille en, to, tre eller fire værdier. Lad os se på eksempler for hvert enkelt tilfælde.

Én værdi (fast) - kantstilen er indstillet for alle sider af blokken.

To værdier (solid double) - den første værdi indstiller stilen for toppen og nederste sider, anden for siden.

Tre værdier (fast dobbelt prikket) - den første værdi for oversiden, den anden for siderne, den tredje for bunden.

Fire værdier (fast dobbelt stiplet stiplet) - hver værdi for den ene side med uret startende fra toppen.

Egenskaben for grænsebredde. Kanttykkelse.

Brug egenskaben border-width for at indstille bredden af ​​et elements kant. Kanttykkelsen kan indstilles i evt absolutte enheder mål, for eksempel i pixels.

Ligesom egenskaben i border-stil, kan egenskaben også indstilles til en til fire værdier. Lad os se på eksempler for hvert enkelt tilfælde.

Eksempel kode:

Også for egenskaben grænsebredde er der værdier i formularen søgeord. Der er tre i alt:

• tynd - tynd kant;
• medium - gennemsnitlig tykkelse;
• tyk - tyk kant;

Kanttykkelse: tynd.

Kanttykkelse: medium.

Kanttykkelse: tyk.

Egenskaben for grænsefarve. Kantfarve.

For at kontrollere kantfarven skal du bruge kantfarveværktøjet. Farverne for denne egenskab kan indstilles ved hjælp af en hvilken som helst metode beskrevet i artiklen "Farver i CSS", nemlig:

• Hexadecimal notation (#ff00aa) af farven.
• RGB-formatet er rgb(255,12,110) . RGBA-format til CSS3.
• HSL formater og HSLA for CSS3.
• Farvenavn, for eksempel sort. Fuld liste Farvenavne er angivet i CSS-farvenavnetabellen.

Kantfarveegenskaben kan også have en til fire værdier og behandler dem på samme måde som de tidligere egenskaber.

Én værdi (rød).

To værdier (rød sort).

Tre værdier (rød sort gul).

Fire værdier (rød sort gul blå).

Lad os nu vende tilbage til problemet nævnt ovenfor og tegne en figur:

Her er koden, der tegner en sådan figur, kun større i størrelse:

Indstilling af værdier for sider separat

Det blev nævnt ovenfor, at du kun kan angive grænseegenskabsværdier for den ene side af en blok. Der er egenskaber til disse formål:

• border-top (øverste kant)
• grænse-højre
• grænse-bund
• grænse-venstre (venstre kant)

Lad mig minde dig om, at der for alle egenskaber er angivet tre værdier (tykkelse, stil og farve) i vilkårlig rækkefølge. Men der er egenskaber, der giver dig mulighed for at indstille tykkelsen, farven og stilen for hver side separat. Skrivningen af ​​disse egenskaber er afledt af ovenstående.

Øverste kantindstillinger (border-top).

• border-top-color - indstiller farven på elementets øverste kant.
• border-top-width - indstiller tykkelsen af ​​elementets øverste kant.
• border-top-style - indstiller stilen for elementets øverste kant.

Højre kantindstillinger (kant-højre).

• border-right-color - indstiller farven på elementets højre kant.
• border-right-width - indstiller tykkelsen af ​​elementets højre kant.
• border-right-style - angiver stilen for elementets højre kant.

Indstillinger for nederste kant (kant-bund).

• border-bottom-color - indstiller farven på elementets nederste kant.
• border-bottom-width - indstiller tykkelsen af ​​elementets nederste kant.
• border-bottom-style - indstiller stilen for elementets nederste kant.

Valgmuligheder for venstre kant (kant-venstre).

• border-left-color - indstiller farven på elementets venstre kant.
• border-left-width - indstiller tykkelsen af ​​elementets venstre kant.
• border-left-style - indstiller stilen for elementets venstre kant.

Et eksempel på brug af disse egenskaber:

Grænse-radius ejendom. Afrunding af kanthjørner.

Egenskaben border-radius er beregnet til at runde hjørnerne af et elements grænser. Denne egenskab dukkede op i CSS3 og fungerer korrekt i alle moderne browsere, med undtagelse af Internet Explorer 8 (og ældre versioner).

Værdierne kan være alle tal, der bruges i CSS.

Border-radius egenskab: 15px.

Hvis blokrammen ikke er angivet, så opstår fileten med baggrunden. Her er et eksempel på en afrundet blok uden en kant, men med en baggrundsfarve:

Border-radius egenskab: 15px.

Der er egenskaber til at runde hvert enkelt hjørne af et element. Dette eksempel bruger dem alle:

Border-top-venstre-radius: 15px; border-top-right-radius: 0; border-bottom-right-radius: 15px; grænse-nederst-venstre-radius: 0;

Border-radius egenskab: 15px.

Selvom denne kode kan skrives i én erklæring: border-radius : 15px 0 15px 0 . Faktum er, at egenskaben border-radius kan indstilles fra en til fire værdier. Tabellen nedenfor skitserer reglerne for sådanne meddelelser.

Efter omhyggeligt at have studeret denne tabel, kan du forstå, at den korteste indgang ønsket stil vil være sådan her: border-radius : 15px 0 . Der er kun to betydninger.

Lidt øvelse

Tegning af en citron ved hjælp af CSS.

Her er koden til sådan en blok:

Margin: 0 auto; /* Centrer blokken */ width: 200px; højde: 200px; baggrund: #F5F240; kant: 1px fast #F0D900; kant-radius: 10px 150px 30px 150px;

Vi har allerede tegnet figuren:

Lad os nu efterlade en trekant fra det:

Trekantkoden er:

Margin: 0 auto; /* Centrer blokken */ padding: 0px; bredde: 0px; højde: 0; kant: 30px ensfarvet hvid; kant-bund-farve: rød;

Denne egenskab opretter en kant omkring et element. Du kan læse mere om denne ejendom på linket, og i denne artikel I generelle oversigt Jeg vil beskrive, hvordan det virker. Denne information vil være nok til at forstå, hvordan man laver frames ved hjælp af CSS.

Syntaksen for grænseegenskaben er enkel: kant: 1px ensfarvet sort; . Denne egenskab har tre betydninger:

• 1px - kanttykkelse.
• ubrudt - rammetype, ubrudt er en ubrudt linje, dobbelt er en dobbelt utrukket linje, stiplet er en stiplet linje. Der er flere andre typer grænser, information om dem kan findes her: CSS grænse.
• sort - indstiller kantfarven. Farver kan angives ved navn, gyldige værdier er her: CSS-farvetabel eller med hexadecimal kode. Hvordan man gør dette er beskrevet i artiklen: farver i CSS.

CSS tekstramme

Her er et eksempel på brug af grænseegenskaben til at skabe en kant, der er en pixel bred og sort:

Dette afsnit er tildelt klassen eksempel-1.

I dette eksempel brugte vi også CSS ejendom polstring eller indvendig polstring. Denne egenskab angiver mængden af ​​indrykning fra teksten til stregen (elementets kant).

Lad os se på et andet simpelt eksempel, bare for at få pointen igennem. Lad os skabe en ramme med tre pixels bred, rød og uden intern polstring (egenskab CSS polstring).

Dette afsnit er tildelt klassen eksempel-2.

Som vi kan se, uden polstring, ser tekstrammen hornet ud.

Hvordan man laver en billedramme i CSS

Rammer til billeder indstilles på samme måde ved at bruge grænseegenskaben. Lad os lave en ramme Grøn farve 4 pixels tyk for billedet.

Eksempel-img (kant: 4px fast grøn;)

Sådan fungerer denne kode:

Sådan runder du hjørnerne af en ramme i CSS

Afrunding af hjørnerne af en kant i CSS udføres ved hjælp af egenskaben border-radius. Denne egenskab blev introduceret i CSS3 og fungerer i alle moderne browsere.

Egenskaben border-radius kan have fra én til fire værdier. Hvis der er én værdi, så indstiller den graden af ​​afrunding for alle hjørner. Lad os give et eksempel på, hvordan denne ejendom vil fungere med én værdi.

Eksempel-3 (kant: 1px ensfarvet sort; kant-radius: 15px; polstring: 10px;)

Sådan fungerer det:

border-radius egenskab: 15px.>

Hvis blokken ikke har en kant, så er der en kant kant-bredde: 0; , så vil området fyldt med baggrundsfarven blive afrundet (baggrundsfarve egenskab). Her er et eksempel:

Eksempel-4 ( border-width: 0; // selvom denne værdi er 0 som standard baggrundsfarve: #DDD; border-radius: 15px; polstring: 10px; )

Sådan fungerer dette eksempel:

border-radius egenskab: 15px.>

Som jeg skrev tidligere, kan egenskaben border-radius indstilles fra én til fire værdier. Tabellen nedenfor beskriver, hvordan hver kombination af værdier vil fungere.

For egenskaben border-radius kan værdier angives som procenter.

Lad os tegne en cirkel i CSS. For at gøre dette skal du tage en firkantet blok på 100 gange 100 pixels og runde den CSS hjørner border-radius: 50% regel.

Eksempel-5 (bredde: 100px; højde: 100px; baggrundsfarve: #F00; kant-radius: 50%;)

Sådan fungerer dette eksempel:

Dette dækker emnet "rammer i CSS" fuldstændigt. Held og lykke med at lære CSS!

I dette kapitel:

Blokmodellen er en måde at vise elementer af browsere, der behandler alle tags som små blokke, for dem er ethvert tag en container med indhold: tekst, billeder, andre tags osv.

• Margin(margin) - tom plads (margin), der adskiller et element fra et andet. Det enkleste eksempel på indrykning er mellemrummet mellem afsnit, der følger efter hinanden. Marginområdet er gennemsigtigt og kan ikke have sin egen farve eller andre designeffekter.
• Grænse(elementkant) - kant på enhver side af elementet. Rammen kan monteres på alle sider af elementet eller på den ene side. Ved hjælp af en ramme kan du blot dekorere et element smukt eller visuelt adskille indholdet af det aktuelle element fra andre elementer på siden.
• Polstring(polstring) - tom plads mellem indholdet af et element og dets kant. Polstringsområdet er gennemsigtigt og kan ikke have sin egen farve eller andre designeffekter.
• De fleste elementer har et indholdsområde, der indeholder alt indhold element (tekst, indsatte billeder eller andre elementer).

Ramme

Rammen repræsenterer almindelig linje, som vises omkring det element, der styles. Men det er slet ikke nødvendigt at bruge en ramme, der omgiver elementet på alle sider. Du kan kun tilføje det fra den påkrævede side af elementet. Hvis du f.eks. kun tilføjer en kant til bunden af ​​et blokelement, vil det producere den samme effekt som elementet

---

(vandret linje), fungerer som en separator.

Hver frame har tre egenskaber, som vi kan kontrollere ved hjælp af CSS: bredde, stil og farve. Lad os se på, hvilke egenskaber der kan bruges til at indstille og ændre dem:

I stedet for at angive alle tre egenskaber, kan du kun angive én - grænseegenskaben, som giver dig mulighed for samtidigt at angive bredden, stilen og farven for grænsen:

Første afsnit.

Andet afsnit.

Tredje afsnit.

For at styre rammen separat på hver side af elementet skal du bruge følgende egenskaber:

• border-top - topramme
• kant-venstre - venstre ramme
• kant-højre - højre ramme
• kant-bund - bundramme

Disse egenskaber fungerer nøjagtigt på samme måde som kantegenskaben, bortset fra at de kun giver dig mulighed for at kontrollere kanten på den ene side af det element, du styler.

Ydre og indre marginer

Indrykning- tom plads mellem indholdet af elementet og dets kant (hvis det er installeret). For at tilføje og kontrollere bredden af ​​polstring på alle fire sider af et element, skal du bruge padding-egenskaben.

Margen er det tomme rum, der adskiller et element fra andre elementer eller kanterne af browservinduet. For at tilføje og kontrollere bredden af ​​margener på alle fire sider af et element skal du bruge egenskaben margin.

Udfyldnings- og marginegenskaberne kan have fra én til fire værdier:

Hvor værdierne er indstillet med uret, startende fra toppen:

Hvis du kun angiver én værdi for egenskaber, vil indrykningerne på alle sider have samme bredde.

Ved første øjekast ser den synlige effekt ved brug af disse egenskaber den samme ud; for at bemærke en visuel forskel mellem dem kan du f.eks. sætte en kant for et element eller et sæt baggrunden:

Almindelig stk.

For indrykninger, såvel som for rammer, er der egenskaber, der giver dig mulighed for at kontrollere størrelsen af ​​indrykket på hver side separat. Polstring styret af egenskaberne: polstring-top , polstring-højre , polstring-bund og polstring-venstre . Marginer styres af følgende egenskaber: margin-top , margin-right , margin-bottom og margin-venstre .

Bemærk: værdier polstringsegenskaber og margin er ikke nedarvet børneelementer, så du skal angive polstringsbredden separat for hvert element, der har brug for det.

Elementets bredde og højde

Standard for blokelementer autobredde bruges. Det betyder, at elementet strækkes præcis lige så meget, som der er ledig plads. Standardhøjden af ​​blokelementer indstilles automatisk, dvs. Browseren strækker indholdsområdet lodret, så alt indhold vises. For at angive tilpassede dimensioner for et elements indholdsområde kan du bruge egenskaberne for bredde og højde.

Ejendom CSS grænse Det virker til at skabe kanten af ​​et objekt, nemlig rammens tykkelse, dens farve og stil. Denne egenskab er meget brugt i HTML. Du kan oprette forskellige effekter for bedre opfattelse af indholdet på siden. Design for eksempel en sidebar, hjemmesidehoved, menu osv.

1. CSS-kantsyntaks

grænse: kant-bredde kant-stil kant-farve | arve;

• border-width - kanttykkelse. Du kan indstille det i pixels (px) eller bruge standardværdier tynd, medium, tyk (de adskiller sig kun i pixelbredde)
• border-style - stil af den viste kant. Kan tage følgende værdier
  • ingen eller skjult - annullerer grænsen
  • prikket - prikket ramme
  • stiplet - ramme lavet af streger
  • solid - enkel linje (oftest brugt)
  • dobbelt - dobbelt ramme
  • rille - rillet 3D-kant
  • ridge, inset, outset - forskellige 3D-rammeeffekter
  • arv - værdien af ​​det overordnede element anvendes
• border-color - kantfarve. Kan indstilles vha specifikt navn farver eller i RGB-format(se navne på html-farver for webstedet)

Bemærk

Værdierne i CSS-grænseegenskaben kan indstilles i enhver rækkefølge. Den mest brugte sekvens er "tykkelsesstilfarve".

2. Eksempler med forskellige CSS-grænser

2.1. Eksempel. Forskellige kantdesignstile kantstil

border-style: stiplet

border-style: stiplet

kant-stil: solid

kant-stil: dobbelt

kant-stil: rille

border-stil: højderyg

kant-stil: indsat

border-style:outset

Fire forskellige stel

kant-stil: prikket

border-style: stiplet

kant-stil: solid

kant-stil: dobbelt

kant-stil: rille

border-stil: højderyg

kant-stil: indsat

border-style:outset

Fire forskellige stel

2.2. Eksempel. Skift rammefarve ved musebevægelse

Dette eksempel er meget enkelt, men interessant. Den viser, hvordan :hover-pseudoklassen og CSS-grænsen kan bruges til at skabe simple effekter (såsom menuer).

Når du holder musen over en blok, ændres rammens farve

Sådan ser det ud på siden:

2.3. Eksempel. Sådan laver du en gennemsigtig kantramme

Rammen kan laves gennemsigtig. Denne effekt er sjælden, men kan nogle gange være meget nyttig for webdesignere. For at indstille gennemsigtighed skal du bruge farveindstillingen i formen RGBA (R, G, B, P), hvor sidste parameter gennemsigtighed er indstillet (reelt tal fra 0,0 til 1,0)

Sådan ser det ud på siden:

3. Border tykkelse: grænse-bredde egenskab

Indstiller stregtykkelsen. Tidligere specificerede vi det i en enkelt beskrivelse af grænsen.

CSS kant-bredde syntaks

grænse-bredde: tynd | medium | tyk | betyder;

• tynd - tynd linjetykkelse
• medium - gennemsnitlig linjetykkelse
• tyk - tyk stregtykkelse

Nedenfor er nogle eksempler. Det mest usædvanlige vil være den forskellige tykkelse af grænsen på hver side.

kant-bredde: tynd

kant-bredde: medium

kant-bredde: tyk

Forskellig tykkelse ved kanterne

Sådan ser det ud på siden:

kant-bredde: tynd

kant-bredde: medium

kant-bredde: tyk

Forskellig tykkelse ved kanterne

4. Sådan laver du en kantramme på kun én kant (kant)

CSS-grænseegenskaben har afledte egenskaber til at indstille ensidede grænser på et element:

• border-top - for at sætte grænsen øverst (øverste kant)
• border-bottom - for at sætte en kant i bunden (nederste kant)
• border-right - for at sætte grænsen til højre (højre kant)
• border-left - for at sætte grænsen til venstre (venstre kant)

Disse grænser kan kombineres, dvs. Skriv din egen ramme for hver retning. Syntaksen er nøjagtig den samme som kant.

Der er også ejendomme

• border-top-color - indstilling af farven på den øverste kant
• border-top-style - indstilling af stilen for den øverste kant
• border-top-width - indstilling af tykkelsen på den øverste kant
• etc. for hver retning

Efter min mening er det nemmere at skrive alt på en linje end at producere ekstra tekst i stilarter. For eksempel vil følgende egenskaber være de samme

/* Beskrivelse af to identiske stilarter: */

4.1. Eksempel. Smuk ramme til at fremhæve citater

Eksempel på citatramme

Sådan ser det ud på siden:

Eksempel på citatramme

Bemærk
Du kan indstille en separat kant for hver side.

5. Sådan tilføjer du flere grænser til et html-element

Nogle gange skal du lave flere kanter. Lad os give et eksempel

5.1. Første mulighed med flere kanter

Sådan ser det ud på siden:

Der er en anden vej gennem skygge.

5.2. Overlæg skygger for at skabe flere rammer

Sådan ser det ud på siden:

6. Afrunding af hjørner ved kanter (kant-radius)

Til at skabe smukke rammer brug egenskaben CSS border-radius (kun tilgængelig i CSS3). Den kan bruges til at skabe afrundede hjørner, som skaber et helt andet look. For eksempel

7. CSS indrykket linje

Pressede linjer kan se imponerende ud mørk baggrund, som ikke er egnet til alle steder.

---

Sådan ser det ud på siden:

For at få adgang til grænse fra JavaScript skal du skrive følgende konstruktion:

document.getElementById("elementID").style.border="VALUE"