[CSS] Border eerder laten eindigen?

[MuddyMagical]

Ik ben bezig om een nieuw design te maken voor een website. Heb alleen één probleempje.

Voor 2 div's zou ik graag willen dat er een paar pixels wit zitten tussen de border-right en border-bottom.

Voorbeeld:


Nu vraag ik me eigenlijk af of dit mogelijk is. Moet ik me hier gaan redden met het maken van een image die er ertussen komt of is het via CSS wel te regelen?
Via Google en GoT kan ik veel problemen vinden met borders, maar deze staat er niet bij.

Iemand een oplossing hiervoor?

[Verwijderd]

Wat je zou kunnen doen is het gebruik van een background-image. Deze exact zo hoog maken als dat je deze wenst te hebben, dus border right -2px. Dat is volgens mij de enige truc, aangezien een border in zijn totaliteit altijd allesomvattend is ten opzichte van het volledige element. Een 'gat' in je border krijgen lukt je dan ook niet met een normale border. Een achtergrond-figuur kan je eventueel gewoon rechts uitlijnen en vervolgens op no-repeat neerzetten. Daarmee creëer je het gewenste resultaat.

[Verwijderd]

zoiets?

code:

<style type="text/css">
h1 {
  color: green;
  border-bottom: 10px solid green;
  margin: 0;
}

ul {
  border-bottom: 10px solid green;
  list-style-type: none;
  padding: 5px 5px 5px 2em;
  width: 200px;
  margin: 0;
}
li {
  border-right: 2px solid green;
  width: 200px;
  font-weight: bold;
}
li:first-child {
  padding-top: 1em;
}
</style>
<h1>Over ons project</h1>
<ul>
<li>Project "Website"</li>
<li>Projectdoelen</li>
<li>Keuzes</li>
<li>Kosten</li>
<li>Uitkomst</li>
</ul>

(waarschijnlijk wil je de border-bottom van de ul nog vervangen door een background-image, gezien de ronde hoekjes)

@hieronder: wat nou div? da's een lijst

[ Voor 19% gewijzigd door Verwijderd op 11-08-2007 12:43 . Reden: effe hipper gemaakt ]

[MuddyMagical]

Verwijderd schreef op zaterdag 11 augustus 2007 @ 12:06:
Wat je zou kunnen doen is het gebruik van een background-image. Deze exact zo hoog maken als dat je deze wenst te hebben, dus border right -2px. Dat is volgens mij de enige truc, aangezien een border in zijn totaliteit altijd allesomvattend is ten opzichte van het volledige element. Een 'gat' in je border krijgen lukt je dan ook niet met een normale border. Een achtergrond-figuur kan je eventueel gewoon rechts uitlijnen en vervolgens op no-repeat neerzetten. Daarmee creëer je het gewenste resultaat.

Hmmm, daar zat ik dus ook al aan te denken. Wordt dan alleen wel even opletten dat de div nog in groote moet kunnen wijzigen.

Verwijderd schreef op zaterdag 11 augustus 2007 @ 12:11:
zoiets?

code:

....

(waarschijnlijk wil je de border-bottom van de ul nog vervangen door een background-image, gezien de ronde hoekjes)

@hieronder: wat nou div? da's een lijst

Dat is nog een betere oplossing! Dan blijft alles nog variabel!

[ Voor 79% gewijzigd door MuddyMagical op 11-08-2007 13:49 ]