Pretty baby spin-doktorer http://1apotekonline.com/cialis/ sterling sølv pille kasse

Runda hörn med CSS

Runda hörn med CSS

Runda hörn på bloggen kan man skapa antingen med hjälp av bilder, eller så använder man sig av CSS.

Det absolut lättaste sättet är att använda sig av CSS, för då sköts allt med kod, istället för att man måste skapa olika typer av bilder.

Så här kan ett exempel se ut:

Den här rutan har runda hörn, men du kan bara se det om du har en nyare version av webbläsare.

Dock så finns det lite begränsningar i det hela och det är att man måste ha en nyare version av webbläsare för att det ska synas. Har man t ex en äldre version av Internet Explorer så funkar det inte, men förhoppningsvis så uppdaterar folk sina webbläsare med tiden, så då kan man ju använda sig av detta.

Så här gör man:







1. Kopiera koden nedanför:

-webkit-border-radius: 15px; /* Saf3-4, iOS 1-3.2, Android <e;1.6 */
-moz-border-radius: 15px; /* FF1-3.6 */
border-radius: 15px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

2. Lägg in koden i din stilmall, i det element som du vill ska ha rundade hörn.
Om du vill att din wrapper ska ha runda hörn, då lägger du in koden i stilmallen där du har koden för wrapper.
Runda hörn på bloggen med css

Det här kan du göra på många olika element på din blogg, så det är bara att testa dig fram. Här ser du skillnaden:

Om du vill göra själva böjen i hörnet mindre eller större, då ändrar du värdet som i exemplet är 15px.
Svårare än så är det inte.

Lycka till!







Grundare av Designa Din Blogg. Drev den här sidan som ett hobbyprojekt under åtta år, numera har jag lämnat över ansvaret för DDB. Är pappa till Ludvig och make till Elin.

Läs mina andra inlägg

78 kommentarer

  1. SvaraElin

    Hej vet du hur man ändrar färg där det står ”Senaste inlägg”,”Kategorier” och ”Arkiv”? Alltså inte under dom utan på dom? Vore glad för svar!:)

  2. SvaraIrina

    Hej!
    Något stämmer inte med min blogg. Min statistik har stannat, den senaste statistiken jag kan se är den ifrån 16:e augusti. Kan du hjälpa mig? 
    Tack på förhand

      1. Irina

        Det har gått mer än en vecka nu och det funkar fortfarande inte! nu står det: Ingen data att visa.

  3. Svaralinnea

    provade denhär koden med det blev fult som fan. och när jag tog bort den är hela designen förstörd.

    allt sitter inte ihop längre. inläggen är en enskild ruta, rubrikerna en, menyn en, headern en osv. och eftersom jag inte har nån aning hur man får tillbaka det till det ursprungliga måste jag göra om hela designen från börjar.
    kul……….

    1. Svaramagda

      Alltså, ni måste sluta gnälla på honom!
      Det är nog du som har gjort fel och tagit bort koden plus någonting mer som t ex; } eller ; båda dom teckna avslutar dom olika delarna i en stilmall.

    2. SvaraLinnea

      Du kan ju inte klaga på honom, håller med Magda. Och om du är osäker innan du gör något på din blogg så kan du väl kopiera kodmallarna och stilmallen så du har en kopia ifall du gör fel.

  4. SvaraAndrea

    Men alltså…ni kan inte klaga på honom om de går sönder..
    ta bort koden först och se om det fixar sig.
    Och jag tipsar alla att spara en kopia av sin stilmall eller  ha en testblogg.


    1. Author
      SvaraLari

      Svårt att säga… det varierar otroligt mycket varje månad! Men någon tusenlapp varje månad kommer in iaf…

  5. SvaraMalin

    Hallå, först o främst, tack för en underbar blogg, har hjälpt mig ur knipan ett antal gånger 😉 o sen till en liten fråga ja funderat över, går det att ordna en svara-knapp på kommentarerna på blogg.se? Så att man inte behöver skapa ett nytt inlägg för att svara på en kommentar? Tack på förhand =)


    1. Author
      SvaraLari

      Det går inte att ordna en svaraknapp…. det är en funktion som finns hos andra, t ex wordpress. Men inget som blogg.se har valt att använda.

    1. SvaraHanna

      Jag tror att det bästa och enklaste sättet är att redigera bilderna innan du lägger upp de på din hemsida. Den kan man göra i t.ex. picnik. Hörnen på bilderna blir då runda. Hoppas att detta hjälper! 

  6. SvaraJesper

    Hej Lari,

    Hittade ingen e-mailadress till dig här på sidan så får skriva min fråga här. Är nämligen så att jag driver en webbutik sen i början av året och undrar om det finns möjlighet att annonsera här på DDB? Butiken har jag länkat och heter Prylsjuk.se. Kika gärna för att se vad vi säljer. Men återkom gärna på den angivna mailen om intresset finns. Tack, Jesper!

  7. SvaraEllen

    Hej jag använde koden på wrappern, side och conent, men det vill fortfarande inte bli runda hörn längst upp bland alla inläggen, vad ska jag göra? Jag har särat på inläggssidan, headern och menyn och vill därför ha runda hörn runt allt, men på inläggssidan blir det bara runda hörn där nere.
    Tacksam för svar!!

  8. Svarahanna

    kan du inte skriva hur man (om man kan) får en slumpikon på sin blogg…
    tex jag & min kompis skulle vilja ha en sådan ikon på våran bakblogg så man skulle kunna slumpa fram recept:)

  9. SvaraIda

    Hejhej!
    Tack för superbraiga tips! Det har hjälpt mig supermycket.
    Men häromdagen när jag skulle börja på en ny design, och skulle ”få bort” det vita runt headern, så fanns där en liten bit kvar i högra hörnet (Kolla min blogg så ser du)
    Hur ska jag göra för att få bort den? Tacksam för svar ^^ 

  10. SvaraH a c h i ~

    Det var verkligen enklare än jag trodde! När jag började blogga för några år sedan ville jag verkligen ha runda hörn, men fattade verkligen inte hur man gjorde, men detta sättet var ju så otroligt mycket enklare! 😀
    Nu har jag bara en fråga.. hur gör man så att även inläggen får runda hörn? Jag har raderat en färgkod så att man ser bakgrunden igenom mellan varje inlägg. Det funkade inte att lägga in på #content. Tack på förhand! 🙂
    //Hachi.se

      1. Gabriela

        Om du vill bestämma själv hur många runda hörn du vill ha använder du denna koden i stället:

        -webkit-border-radius: 15px 15px 15px 15px;; /* Saf3-4, iOS 1-3.2, Android <e;1.6 */
        -moz-border-radius: 15px 15px 15x 15px; /* FF1-3.6 */
        border-radius: 15px 15px 15px 15px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
        

        Sedan ändrar du bara de olika pixlarna. 🙂  

      2. Strangerz

        Gabriella – Det finns ett enklare sätt. Man kan faktiskt skriva:

        border-bottom-left-radius:15px;
        -moz-border-bottom-left-radius:15px;
        -webkit-border-bottom-left-radius:15px;
        

        Mycket enklare och man slipper massor med överflödig kod! 🙂

    1. SvaraMattias

      Du lägger in den i image i stilmallen 🙂

      .image {border: 0px solid #000;padding: 0px 0px 0px 0px;margin: 0px 0px 0px 0px;-moz-border-radius: 15px;border-radius: 15px;}
  11. Svarakira

    Jag har en fråga. När jag får kommentarer, så syns inte bloggadressen, fast dom som skrivit kommentaren satt dit sin blogg. Vad ska jag göra?!

  12. Svaratava

    hej! jo titta, på min blogg så står min rubrik i lite feta bokstäver. och jag vill inte ha så, jag vill ha smala bokstäver. och det handlar inte om typsnittet för jag har testat med många olika, och alla är feta på min blogg medans samma typsnitt är smal på någon annans. jag har provat allt men vet inte hur jag ska göra den smal! nånting är det ju som jag har gjort fel eftersom det funkar för andra. såhär ser min stilmall ut i ”entry headers”
    /** Entry headers **/h3 {font-family: , letter gothic std, microsoft sans serif, arial;font-size: 20px;color: #30383A;padding:17px 0px 10px 75px;margin: 0px 0px 0px;height: 14px;vertical-align: top;text-align: center;border-bottom: 1px dashed black;text-transform: uppercase;

    tack!!

    1. Svarakira

      Om du menar att du inte vill ha STORA bokstäver, utan små. Så istället för ”uppecase” ska du byta till ”lowercase” 🙂 Hoppas det funkar!

  13. SvaraLouisa

    hej, har försökt att fixa det där med runda hörn på min blogg, men det enda hörnet som blir runt är det vänstra nedre hörnet, varför blir det så? vad gör jag för fel?

  14. SvaraAnna ♥

    Det här har inget med inlägget att göra, men är det någon som vet vad ett ”skript” är och hur man får bort det? För varje gång jag går in på min blogg hänger den sig och så kommer det upp en skylt som undrar om jag vill sluta köra skriptet eftersom det gör sidan långsam. Jag blir galen och jag vet inte vad det beror på… Någon som kan ge en hjälpande hand?
    Med vänligaste hälsningar, Anna

  15. Svaramaria

    Hej, jag tycker din blogg är jätte bra, jag har använt många av dom här koderna för att hjälpa min kompis med sin design på blogg esse. Men jag har wordpress och kan inte använda mig av dom här koderna pga det. Jag undrar alltså om ni kunde visa hur man redigerar i wordpress. 🙂

  16. SvaraAjka

    Hej! Det här har ingenting men ditt blogginlägg att göra men jag hittar ingenstans ett annat sätt att kontakta dig, sidan är lite rörig… 

    Jag undrar om du gör privata bloggdesign? Jag är ute efter en med flash header, taggmoln, osv. Mot ersättning såklart 🙂

    Mvh

  17. SvaraJossan ♥

    hej, jag vet inte vart jag ska kommentera så jag skriver här.
    Jag har lite problem med min blogg.. jag kan inte ändra typsnittet i headern, jag kan inte heller göra ”content” bredare, trots att jag gör allt som du skriver i dina inlägg om hur man tex gör bloggen bredare eller fixar ett mellanrum mellan inlägget och menyn, fast gjort tvärtom. INGET FUNKAR! snälla ber om svar, vet inte vad jag ska göra.. 🙁

    1. SvaraSelma

      du kanske redan har jgort det, när du klickar på spara och sen går in på din blogg så klickar du f5 för att då uppdateras den! 😉

  18. Svarakatarina tran

    HEY!

    snälla kan du inte berätta hur man ändrar datumformat, eller vad det heter. på blogg.se står datumet som 2011-09-24 och jag vill liksom ha, t ex lördag 24 september 2011 , fattar du? 😀 tacksam för svar! 
    (vet inte vart jag ställer frågor, så skrev det i en kommentar)

      1. Viktoria

        Du kan inte ändra det i stilmallen (Css = utseende, t.ex färg och typsnitt), det är något man gör i kodmallen (HTML – vad som ska vara vart, t.ex då datumformat). Men det är väldigt bökigt. Det innebär helt nya koder + en del javascript.

  19. SvaraFelix

    Tänk också på att i IE (Internet Explorer) så måste ALLA hörn anges. Med andra ord blir koden då

    #dittdivhär {
    border-radius: 2px 2px 2px 2px; /*Detta är bara ett exempel*/
    -moz-border-radius:2px; /*Mozilla Firefox behöver bara 1 sifra*/
    }

  20. SvaraMatilda

    Yo? 
    Jo jag undrar hur det kommer sig att all min på min blogg i ett inlägg bara typ trycker ihop sig? Även fast jag gör mellanrum emellan raderna så trycker det ihop sig igen när man publicerat? 
    Det är störande. 

    1. SvaraAlva

      Hej! Om din blogg trycker ihop sig som du förklarar har du antagligen Mac? Jag har det och när jag vill ha mellanrum måste jag trycka på ”Ändra redigerare” och sätta dit (fast utan mellanrum) efter det sista ordet på raden. T.ex. 

      …Idag köpte jag en ny tröja.

      Hoppas jag var till hjälp!

      1. Alva

        Oj, såg inte att man var tvungen att sätta dit en kod! Jag menar:

        Om din blogg trycker ihop sig som du förklarar har du antagligen Mac? Jag har det och det är faktiskt ganska störande… När man vill ha en hel rad mellan måste man trycka på ”Ändra redigerare” och sätta dit 

        &lt;br/&gt;
        

        T.ex:
        ….Idag köpte jag en ny tröja.

        &lt;/div&gt;&lt;br/&gt;
        

        Hoppas jag var till hjälp!

  21. SvaraElina

    Hej! Har du någon aning om hur man gör så att menyn och headern liksom rullar med hela tiden när man scrollar neråt på bloggen?

  22. SvaraFelix

    MAN MÅSTE SKRIVA SÅ HÄR:

    #dittdiv {
    border-radius:15px;
    -moz-border-radius:15px;
    -webkit-border-radius:15px 15px 15px 15px;
    /*Webkit är IE, Chrome… Du måste skriva px för ALLA hörnen*/

  23. SvaraFelix

    Hej Elina,
    Jag tror inte att blogg-leverantörerna tillåter att ändra det i koden, men du gör det i css. Prova lägga in detta:

    #header {
    position:absolute;
    }

    #menu {
    position:absolute;
    }

    @media screen {
    body>#header {
    position:fixed;

    body>#menu {
    position:fixed;
    }

    Grejen är att egentligen så vill jag se din blogg så att jag kan se källkoden för att veta vilka div element dom EGENTLIGEN använder för Headern och Menyn. Länka gärna ifall koden inte fungerar. Men som sagt så tror jag inte att dom tillåter sånt och det blir typ helt cp på hela sidan ändå.

  24. SvaraAngie Obell

    Jag har ett problem som jag verkligen behöver hjälp med, och jag vet inte vart jag ska vända mig förut till dig.

    När man besöker min blogg så stannar hela sidan upp och fram kommer en stor grå ruta där det står att scriptet inte går att köra. Vad ska jag göra? Snälla hjälp mig jag är i stort behov av hjälp! svara gärna till carolineangela@live.com

    tack på förhand!

  25. SvaraHanna

    Hej Lari! Jag undrar hur man byter textsnitt i sina inlägg ex. typ från Times New Roman till Verdana. Och även hur man byter text på själva bloggnamnet. På min blogg då ”Happiness in a box” till ett annat ‘textsnitt’. Tacktack! 🙂

  26. SvaraMatilda

    När jag ändrade bredden på min inlägg så försvann #side från bloggen. Den finns kvar i sidmallen, men man ser inte Arkiv, senaste inlägg osv på bloggen. Snälla hjälp mig! 

  27. SvaraAmanda.

    Jag har delat upp min meny med ”boxar” och högst upp i menyn har jag inte fått  runda hörn om man säger så. Har ändå försökt och klistrat in den där koden överallt! Vet någon vars man ska klistra in den? Om ni inte fattar kika in på min blogg då, så ser ni….. 🙂

  28. SvaraMYLLENBERG.SE

    Jag har för mig att du skrivit ett inlägg om var man kan få runda hörn på sin meny. Men jag hittar inte det inlägget! Jag vill använda bilder, inte css, och jag vet hur jag ska göra. vad jag INTE vet är i vilket kodavsnitt jag hittar koderna för ”ovandelen” och ”nederdelen” på min meny. eller måste jag helt enkelt lägga till koder? vilka i så fall? Hade blivit väldigt glad för svar, berätta bara var jag hittar koderna för detta så fixar jag själv 🙂 Tack!

  29. SvaraSusanna

    Hur gör man så att det bara är runda hörn längst ner? Vill ha det så på menyn nämligen 😉 Tacksam för svar!

    1. SvaraStrangerz

      border-bottom-right-radius:10px;
      border-bottom-left-radius:10px;
      -moz-border-bottom-right-radius:10px;
      -moz-border-bottom-left-radius:10px;
      -webkit-border-bottom-right-radius:10px;
      -webkit-border-bottom-left-radius:10px;

  30. SvaraMatilda

    Jag undrar hur man får senaste inläggen, kategorier m.m att ” lämna” headern. Hur jag än gör så sätter den sig ihop med headern och vill ha dom som en spalt bredvid. Hur gör jag?

  31. SvaraHanna

    Tusen tack för all tips! Har på egenhand lyckats göra en ”någorlunda” fin blogg:)
    Jag önskar om det är möjligt, att man kan samla ihop sina favoriter i ett speciellt avskilt ställe då man kanske måste göra om sin procedur, ett ex antal gånger.

    Väl mött 

  32. SvaraLydia

    Hej! Jag har senaste Internet Explorer installerad på min dator men jag kan fortfarande inte se runda hörnen på ert exempel!

    1. SvaraFelix

      Lydia: Internet Explorer är sämst. Jag rekommenderar dig att byta webbläsare. IE läser ibland border-radius och ibland inte. Jättemysko grej. IE håller dessutom på att dö ut. Fler och fler går över till Google Chrome och Firefox.

  33. Svaramly

    Jag ville ha runda hörn på området kring mina inlägg! funkade kanon! Sådär ser det nu ut på min.

    div#content {
    background: #fff;
    float: left;
    clear: left;
    display: inline;
    padding: 0 20px 20px 20px;
    width: 540px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    }
  34. SvaraConneDonne

    När jag klurat lite med koderna funkade de grymt bra. (Krashade först min testblogg en gång.)

    Men nu äre såhär att i menyn på min blogg har jag lagt in en bild på mej (Som är inlagd i kodmallen) Kan jag på nått sätt göra den bilden rund oxå? 🙂

    Tack för en awesome blogg som har svar på dom flesta bloggdesigns problemen! 😉

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *

OBS! Om du skall skriva kod måste du göra på följande sätt: [code]Din kod här[/code]