Många har frågat om det här med runda hörn på sin blogg, och hur man gör det.
Jag har skrivit ett par inlägg om hur man gör det med bilder, det hittar du här: Bubblor runt kommentarerna eller här: Rama in dina inlägg med bubblor

Men, om man nu inte vill hålla på med bilder, så kan man göra det med ren CSS.

Här är ett exempel:

Hur gör man då?

1. Klistra in följande kod i din stilmall. Klicka sedan på spara.

#box {background: #cccccc;}
.toppen {background: #ffffff;}
.botten {background: #ffffff;}
.rad1{margin: 0 5px; height: 1px; overflow: hidden; background: #cccccc;}
.rad2{margin: 0 3px; height: 1px; overflow: hidden; background: #cccccc;}
.rad3{margin: 0 2px; height: 1px; overflow: hidden; background: #cccccc;}
.rad4{margin: 0 1px; height: 2px; overflow: hidden; background: #cccccc;}
.innehall {padding: 10px;}


2. Gå in i dina kodmallar och lägg in följande kod:

<div id="box">
 <div class="toppen">
   <div class="rad1"></div>
   <div class="rad2"></div>
   <div class="rad3"></div>
   <div class="rad4"></div>
 </div>
<div class="innehall">Ditt innehåll här...</div>
 <div class="botten">
   <div class="rad4"></div>
   <div class="rad3"></div>
   <div class="rad2"></div>
   <div class="rad1"></div>
 </div>
</div>

Var du ska lägga in koden är det stora problemet här, för det beror helt och hållet på var du vill ha de runda hörnen.
Men du ska iaf lägga in innehållet i rutan där det står ”Ditt innehåll här…”

Om du exempelvis vill lägga in senaste inläggen som finns i menyn, så ska det se ut på följande sätt i din kodmall:

Det som är markerat med rött är koden för själva boxen, det markerat med grått är innehållet, dvs senaste inläggen.

Då kommer det se ut så här sen:

Det finns massor av olika varianter av rutor man kan göra, men jag tänker inte ta upp de här, utan gå in på Webdesignskolan istället och läs mer och få fler exempel: CSS-effekter – Runda hörn

OBS – Tänk på att spara en kopia av din stilmall och kodmall innan du ger dig på att försöka det här, för det är lätt hänt att något går fel.

Om Lari

Lari Salminen har skrivit 877 inlägg.

Grundare av Designa Din Blogg. Jobbar heltid som brandman på Medelpads Räddningstjänstförbund och driver den här sidan på fritiden som en hobby.