---
title: "Ett hörn runt i div"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/138973-ett-hörn-runt-i-div"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "K@llen"
published: "2005-12-07T21:24:22.000Z"
updated: "2005-12-09T21:58:44.000Z"
replies: 8
views: 461
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/138973-ett-hörn-runt-i-div"
---

# Ett hörn runt i div

## #1 — K@llen, 2005-12-07T21:24Z

Hej,   :) 

Klockan är mycket och jag ser antagligen inte skogen för alla träden. Så här är läget:

Jag har en div som är satt med en 1px tjock border runt om i en tjusig färg. Ett av hörnen vill jag ha runt. Hur gör jag på bästa enklaste sätt?

Permalänk: https://www.webforum.nu/p/138973

## #2 — frankof, 2005-12-07T21:29Z

En bild.
har för mig att det är enda lösningen än så länge(någon special css för FF fans om jag inte minns fel)

Permalänk: https://www.webforum.nu/p/1723197

## #3 — K@llen, 2005-12-07T21:30Z

Testade det först, men den la sig innanför bordern. :(

Permalänk: https://www.webforum.nu/p/1723198

## #4 — frankof, 2005-12-07T21:48Z

om du lägger bilden i et lager då?(lägg den i en \<div\> och ge den en z-index)

Permalänk: https://www.webforum.nu/p/1723210

## #5 — tanten, 2005-12-07T22:25Z

Här är ett exempel på en/tvåpixelsdivvar med css...
.rundtop {background: #B0C4DE;}

.rundbotten {background: #B0C4DE;}

.r1{ margin: 0 16px; height: 1px; overflow: hidden; background: #ffffff;}
.r2{margin: 0 13px; height: 1px; overflow: hidden; background: #ffffff;}
.r3{margin: 0 11px; height: 1px; overflow: hidden; background: #ffffff;}
.r4{margin: 0 9px; height: 1px; overflow: hidden; background: #ffffff;}
.r5{margin: 0 8px; height: 1px; overflow: hidden; background: #ffffff;}
.r6{margin: 0 7px; height: 1px; overflow: hidden; background: #ffffff;}
.r7{margin: 0 6px; height: 1px; overflow: hidden; background: #ffffff;}
.r8{margin: 0 5px; height: 1px; overflow: hidden; background: #ffffff;}
.r9{margin: 0 4px; height: 1px; overflow: hidden; background: #ffffff;}
.r10{margin: 0 3px; height: 2px; overflow: hidden; background: #ffffff;}
.r11{margin: 0 2px; height: 2px; overflow: hidden; background: #ffffff;}
.r12{margin: 0 1px; height: 3px; overflow: hidden; background: #ffffff;}

Här är botten och så vänder man på det hela om man vill ha topp.

\<div class="rundbotten"\>
	\<div class="r12"\>\</div\>
	\<div class="r11"\>\</div\>
	\<div class="r10"\>\</div\>
	\<div class="r9"\>\</div\>
	\<div class="r8"\>\</div\>
	\<div class="r7"\>\</div\>
	\<div class="r6"\>\</div\>
	\<div class="r5"\>\</div\>
	\<div class="r4"\>\</div\>
	\<div class="r3"\>\</div\>
	\<div class="r2"\>\</div\>
	\<div class="r1"\>\</div\>\</div\>

Osäker på om du kan göra en rund bordereffekt annat än med bild. Har nog bara sett exempel på runda hörn när det finns en bakgrundsfärg och en färg på allt det som det runda hörnet finns i. Men man kan ju alltid testa ;-)

Permalänk: https://www.webforum.nu/p/1723223

## #6 — sl0k, 2005-12-07T22:27Z

<http://pro.html.it/esempio/nifty/>

Permalänk: https://www.webforum.nu/p/1723225

## #7 — fiddler, 2005-12-07T22:52Z

Mitt bidrag: <http://member.webforum.nu/3888/corner.html>

Permalänk: https://www.webforum.nu/p/1723240

## #8 — K@llen, 2005-12-09T19:59Z

Tack för alla förslag på lösningar. Markerar det som passade mig bäst. :)

Permalänk: https://www.webforum.nu/p/1726930

## #9 — caya, 2005-12-09T21:58Z

jag gjorde en specialare med h1
i html såhär
\<div class="slutspurt"\>
\<div class="index"\>
\<h1 class="index"\>\<span\>välkommen\</span\>\</h1\>
\<p\>blablabla\</p\>
\</div\>\</div\>

i css'en såhär

.index {
background-image:url(img/roundcornertop.jpg);
margin:0;
padding-bottom:10px;
background-position:top right;
background-repeat:no-repeat;
}
.index h1 span {
display:none;
}
h1 {
	font-size: 16px;
	background-repeat:no-repeat;
	background-position:right;
	height:80px;
	margin:0;
}
.slutspurt {
background-image:url(img/roundcornerbottom.jpg);
background-position:bottom right;
background-repeat:no-repeat;
margin:0;
padding:0;
border-left:3px solid #C6D96D;
border-right:3px solid #C6D96D;
}

h1-texten visades inte men bakgrunden gjorde det och p flöt inte in över bakgrunden. man kan säkert lösa det på andra sätt men jag tyckte det här var effektivt

ps. jag har inte kollat igenom alla svar, kanhända att andra svarat som mig också... ds.

Permalänk: https://www.webforum.nu/p/1726984

---

Tråden på webben: https://www.webforum.nu/amne/html-css/138973-ett-hörn-runt-i-div