55 besökare, 1 medlem och 1 Student är online nu
Loopia

CSS (Cascading Style Sheets)

Runda hörn (border-radius)

Tillämpa runda hörn i boxar, tabeller, bilder etc genom att ange border-radius.

Radien på hörnen anges i ordningen Top-Left, Top-Right, Bottom-Right, Bottom-Left som tex:

border-radius: 20px 15px 10px 5px;

Exemplet nedan använder border-radius på en Box (DIV):

Runda hörn i en box (div)

              border-radius: 20px;

 

Klicka här för att se fler exempel Öppnas i nytt fönster (Open in new window) 

CSS-koden:

#box1 {
width: 400px;
height: 100px;
background-color: #95B995;
border-radius: 20px;
}

HTML-koden:

<div id="box1">
Text och innehåll här.
</div>

 

Exemplet nedan använder border-radius på en Bild (image):

Casino Cosmopol i Sundsvall

 

Klicka här för att se fler exempel Öppnas i nytt fönster (Open in new window) 

CSS-koden:

.round_corner {
border-radius: 30px;
}

HTML-koden:

<img src="casino_cosmopol" class="round_corner" />

 

Exemplet nedan använder border-radius på en Tabell (Table):

Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6
Cell 7 Cell 8 Cell 9

 

klicka här för att se fler exempel Öppnas i nytt fönster (Open in new window) 

CSS-koden. Notera att två classer används, en till tabellen och en till tabellcellerna:

.round_corner_table {
width: 400px;
margin: 10px;
padding: 10px;
border: 1px solid #95B995;
border-radius: 15px;
}

.round_corner_table_cell {
border: 1px solid #95B995;
border-radius: 5px;
}

HTML-koden:

<table class="round_corner_table" border="0" cellpadding="8" cellspacing="10">
<tr>
<td class="round_corner_table_cell">Cell 1</td>
<td class="round_corner_table_cell">Cell 2</td>
<td class="round_corner_table_cell">Cell 3</td>
</tr>
<tr>
<td class="round_corner_table_cell">Cell 4</td>
<td class="round_corner_table_cell">Cell 5</td>
<td class="round_corner_table_cell">Cell 6</td>
</tr>
<tr>
<td class="round_corner_table_cell">Cell 7</td>
<td class="round_corner_table_cell">Cell 8</td>
<td class="round_corner_table_cell">Cell 9</td>
</tr>
</table>