Ronde hoeken met behulp van css

[jeanmi]

Beste Forumleden,

Graag zou ik op mijn site afgeronde hoeken verkrijgen met behulp van css.
Ik heb in het forum al verschillende zaken opgezocht maar ik begrijp het niet helemaal.
Op het net had ik ook al een les gevonden waar de ronde hoeken worden gemaakt in een tabel en met behulp van afgeronde figuurhoeken. Het probleem is dat in de browser de scheiding van de cellen te zien zijn, dus lijkt het mij niet de beste oplossing.
Verder vond ik ook op het net deze code:

div.roundedcorners {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border:1px solid #ccc;
behavior: url(/ie-css3.htc);
}

Toepassen is eenvoudig (zeggen ze toch zelf ) al zijn er wel meerdere vermeldingen nodig om het te laten werken in alle browsers zoals Chrome en Firefox. De volledige code wordt dan als volgt.
Toepassen gaat met behulp van een extra bestand 'ie-css3.htc' die gedownload kan worden. Na downloaden upload het bestand naar je website.

Tot hier snap ik het wel gedeeltelijk, wat ik niet begrijp is het volgende:
1. Plaats ik dit in mijn zelf aangemaakte externe stylesheet (MijnStijl.ccs)
2. Indien ja waar?
3. Mijn site is gemaakt met DW cs3, maak ik dan een nieuwe css-regel, die ik definieer in MijnSrijl.css?
4. Welk type kies ik dan: Klasse, Tag of Geavanceerd?
5. Wat moet ik verder instellen in de categorie, kies ik dan voor kader waar ik de afmetingen enz. kan instellen.
6. Hoe maak je dit voorbeeld?


Dit zijn dus enkele van mijn vragen.
Kan er mij iemand simpel uitleggen hoe ik hier aan begin.
Hartelijk dank voor iedere reactie.
Mvg,
Jeanmi

 

[ginojo]

The border-radius property is supported in IE9+, Firefox 4+, Chrome, Safari 5+, and Opera.
http://www.w3schools.com/cssref/css3_pr_border-radius.asp

Het is dus niet echt meer nodig aangezien de oudere browsers eindelijk beginnen uit te sterven. Ik zeg: Bespaar jezelf de moeite.

En ik weet dat ik nu reacties kan verwachten die zeggen dat je rekening moet houden met al je bezoekers.

 

[jeanmi]

Het is dus niet echt meer nodig aangezien de oudere browsers eindelijk beginnen uit te sterven. Ik zeg: Bespaar jezelf de moeite.

En ik weet dat ik nu reacties kan verwachten die zeggen dat je rekening moet houden met al je bezoekers.

Allemaal goed en wel, maar dat zegt mij nog niet hoe ik ronde hoeken moet maken in css
Mvg,
Jeanm

 

[rolfohtar]

1. Plaats ik dit in mijn zelf aangemaakte externe stylesheet (MijnStijl.ccs) Ja
2. Indien ja waar? De locatie maakt in principe niet uit
3. Mijn site is gemaakt met DW cs3, maak ik dan een nieuwe css-regel, die ik definieer in MijnSrijl.css? DW gebruik ik niet, dus dat weet ik zo niet
4. Welk type kies ik dan: Klasse, Tag of Geavanceerd? Zie 3
5. Wat moet ik verder instellen in de categorie, kies ik dan voor kader waar ik de afmetingen enz. kan instellen. Zie 3
6. Hoe maak je dit voorbeeld? Zie hieronder. Het is gelukkig vrij simpel. Het plaatje dat je geeft maak je als volgt:

HTML code:

<div class="roundedcorners">
Jouw tekst hier
</div>

CSS code:

.roundedcorners {
 background: #333;
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border: 2px solid #EE7E11;
 color: #FFF;
 padding: 5px;
}

 

[jeanmi]

Ronde hoeken in css

Hartelijk dank beste rolfothar.
Inderdaad simpel als je het weet, maar het werkt.:thumb:
Mvg,
Jeanmi

 

[rolfohtar]

Graag gedaan