Rss Feeds
4 Runda hörn med css

Runda hörn med css

,

Det finns en rad olika tekniker för att skapa runda hörn med hjälp av css. Här är ett av de enklaste sätten att skapa runda hörn på en box. Metoden använder sig av fyra div taggar, några få rader csskod och fyra små bilder.

Exempel:

Klicka här för att se följande exempel

HTML:

<div class="round"><div><div><div>
<p>Innehållet skrivs här...</p>
</div></div></div></div>

CSS:

.round {
   background:url(images/corners1/lt.gif) 0 0 no-repeat;
   background-color:#003399;
}
.round div {
   background:url(images/corners1/rt.gif) 100% 0 no-repeat;
}
.round div div {
   background:url(images/corners1/rb.gif) 100% 100% no-repeat;
}
.round div div div {
   background:url(images/corners1/lb.gif) 0 100% no-repeat;
   padding: 30px;
}

Bilder:

lt.gif rt.gif rb.gif lb.gif

Boxen består av fyra divisioner inuti varandra med en bild i vardera hörn.

  • Den yttersta (första) div-taggen bestämmer boxens bredd, anger boxens bakgrundsfärg och visar bilden för det övre vänstra hörnet.
  • Den näst yttersta visar bilden med det övre högra hörnet.
  • Nästföljande div placerar bilden i det nedre högra hörnet.
  • Den sista div-taggen visar bilden i nedre vänstra hörnet och anger boxens padding.

För att undvika problem är det viktigt att boxens bredd och eventuell höjd enbart anges i den första div-taggen och att eventuell padding anges i den sista.

Dela

| Mer

Kommentarer

4 kommentarer för " Runda hörn med css" Kommentera nu!

Eric
Den 2008 - 09 - 25 12:03:43

snygg guide!

Jonas
Den 2008 - 10 - 25 23:27:57

Mer av denna typ av guider! Alltid bra att få tips på coola effekter!

Tiger
Den 2009 - 09 - 5 08:22:44

Visst går det att göra runda hörn med Javascript? Nån som vet hur??

Softmind
Den 2010 - 03 - 23 16:45:16

Bra tips, har sökt länge efter. Såg ett avsnitt i den bästa design program Dreamweaver men tappade bort. Coolt.

Lämna en kommentar

Namn* Epost* Blogg / Webbsida
Liknande artiklar
0

Drop down menu

Denna guide visar hur man skapar en enkel drop down menu till din blogg eller hemsida. Guiden innehåller även ett färdigt exempel som direkt går att använda!...

0

Flytande citat som i veckotidningar

I många magasin och tidningar brukar det finnas citat som flyter inuti ett textstycke. Detta guide visar dig steg för steg hur du kan lägga in citat i din text med hjälp av CSS och HTML-taggen blockqu...

2

Genomskinliga bilder med CSS

Med CSS är det möjligt att ge bilder olika grad av genomskinlighet. Det kan vara en en användbar effekt om man exempelvis vill ge fokus åt vissa bilder i ett bildgalleri. Den här guiden visar hur man ...