---
title: "Runda hörn i divar?"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/100191-runda-hörn-i-divar"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Jesper T"
published: "2004-03-24T12:48:59.000Z"
updated: "2004-03-26T01:57:29.000Z"
replies: 7
views: 791
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/100191-runda-hörn-i-divar"
---

# Runda hörn i divar?

## #1 — Jesper T, 2004-03-24T12:48Z

Jag har gjort ett litet test som verkar funka. Men flundrar på om det är "rätt". (ser ok ut i fler webbläsare än I.E?)

```
<style type="text/css">
<!--
.container{	width:145px;background:URL(middle.gif) repeat-y;
          	font-family:tahoma,verdana,arial;font-size:11px;
	   	line-height:16px;
	}

.container_top{position:absolute;width:145px;height:8px;background:URL(top.gif) no-repeat;}

.container_middle{padding:8px 0 0 8px;}

.container_bottom{position:absolute;width:145px;height:8px;background:URL(bottom.gif) no-repeat;}
-->
</style>

<div class="container">
<div class="container_top"></div>
<div class="container_middle">
Rad ett<br>
Rad två<br>
Rad tre<br>
Rad fyra<br>
Rad fem<br>
Rad sex<br>
Rad sju<br>
Rad åtta<br>
</div>
<div class="container_bottom"></div>
</div>
```

Bilagor:

- [runda_hörn.zip](https://www.webforum.nu/a/3134.zip)

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

## #2 — Flashes, 2004-03-24T13:45Z

Snyggt,
ser bra ut i FireFox i varjefall.

Sedan om det är bästa/enda sättet att göra vet jag inte

Mvh
Jan-Olov

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

## #3 — jarvklo, 2004-03-24T13:52Z

Hmm...

Din exempelfil funkar i MSIE4, MSIE5, MSIE5.5, Firefox  och opera7 också...

Snyggt jobbat :birp

Men du skall få några **små** tips ändå:

1) Egentligen får man inte ha med understreck i klassnamn i CSS enligt standard - men  bindestreck går bra, så döp om klasserna tilll .container-middle osv.

2) Behövs verkligen position:absolute? 
När du lägger tre div:ar efter varandra sådär så kommer de att ligga under varandra, kant i kant som default - dvs utan att du behöver köra med position:absolute ;)

3) Repeteringarna sköter sig själv... Du behöver inte klura på no-repeat och repeat-y när bakgrundsbilden är exakt lika bred som div:en den ligger i (om du inte vill) ;)

4) De "inre div:arna" tar hela bredden av den yttre - så du behöver inte lägga width:145px på allihop om du inte vill...

Du kan alltså reducera din CSS till det här 

```
.container{
  width:145px;font-family:tahoma,verdana,arial;
  font-size:11px; line-height:16px;
  background:url(middle.gif);
}
.container-top{height:8px;background:url(top.gif);}
.container-middle{padding:8px 0 0 8px;}
.container-bottom{height:8px;background:url(bottom.gif);}
```

... om du t.e.x vill spara bandbredd eller så (jag sa väl att detta var smådetaljer ?  ;) ) :birp

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

## #4 — Jesper T, 2004-03-24T16:14Z

> Du kan alltså reducera din CSS till det här

 Tack för hjälpen, men i I.E. så ser der inte bra ut med förenklingen du gjorde. *Container-top/bottom:s* bakgrunder hamnar fel.

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

## #5 — jarvklo, 2004-03-24T16:45Z

Ajdå - du har rätt...

Jag fick visst inte med alla detaljer :r

```
.container{
  width:145px;font-family:tahoma,verdana,arial;
  font-size:11px; line-height:16px;
  background:url(middle.gif);
}
.container-top{height:8px;background:url(top.gif);[b]font-size:1px;line-height:1px;[/b]}
.container-middle{padding:8px 0 0 8px;}
.container-bottom{height:8px;background:url(bottom.gif);[b]font-size:1px;line-height:1px;[/b]}
```

Ursäkta en gammal förvirrad besserwisser :r

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

## #6 — Hansen, 2004-03-24T19:27Z

[A List Apart](http://www.alistapart.com/) har en artikel om detta, [Creating Custom Corners & Borders](http://www.alistapart.com/articles/customcorners/).

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

## #7 — Jesper T, 2004-03-25T07:59Z

Jag ändrade även denna rad:

```
.container-middle{padding:0 0 0 8px;}
```

 :)
Tack för hjälp.

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

## #8 — Choronzon, 2004-03-26T01:57Z

funkar det i mac? osx & os9?

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/100191-runda-hörn-i-divar