CSS Rundungen der Ecken

Hallo Liebe Community.

In einem Forum in dem ich zweite Administratorin bin, wurde ich um Hilfe mit CSS gebeten, da ich HTML und CSS Kenntnisse habe.- Die Administratorin gab mir einen Code und erklärte mir, dass etwas nicht funktionierte, und dass er für die Rundung der Ecken verantwortlich wäre. Ich probierte den CSS aus, und obwohl alle Ecken im Code den gleichen Radius haben, ist die rechte Ecke nicht gerundet.

Screenshot:


Der Code lautet wie folgt:

Code:

.bodyline{
border:1px solid #0000;
-webkit-border-radius:
60px;-webkit-border-top-right-radius: 7px;
-webkit-border-bottom-left-radius: 7px;
-moz-border-radius: 60px;
-moz-border-radius-topright: 7px;
-moz-border-radius-bottomleft: 7px;
border-radius: 60px;border-top-right-radius: 7px;border-bottom-left-radius: 7px;
border-style: dashed;
}

Auch wollte sie den Code auf dotted umändern, also dass es nicht mehr dashed ist, sondern dotted. Aber auch das funktionierte nicht- was aber auch daran liegen kann, dass ich einfach zu blöd bin, das zu machen, obwohl ich ja eigentlich Kenntnis besitze. Ich hoffe ihr könnt mir weiter helfen (:

Liebe Grüße
~Sue

Wenn du dir den Code mal anschaust, wirst du sehen, das es hier zwei verschieden Radien gibt:

Code:

-webkit-border-radius: 60px;
-webkit-border-top-right-radius: 7px;
-webkit-border-bottom-left-radius: 7px;
-moz-border-radius: 60px;
-moz-border-radius-topright: 7px;
-moz-border-radius-bottomleft: 7px;
border-radius: 60px;
border-top-right-radius: 7px;
border-bottom-left-radius: 7px;

Hier ist einmal der gesamte Radius auf 60 PX definiert.
Weiter hin steht dort das oben Recht und unten Links der Radius 7PX betragen soll.
Wenn nun also überall der Radius 60 Px betragen soll, dann entferne alle Einträge, in denen hier 7 Px angegeben ist.

Edit:
Ich brauche mal den Link zum betroffenen Forum.
Habe ich schon: http://warrior-cats-animals.forumieren.com/

Edit2:
Weiterhin ist der Eintrag:
border-style: dashed;
so nicht erforderlich, da der Style des Rahmens in der ersten Zeile schon deviniert ist:
border:1px solid #0000;
Dort ist "solid" angegeben. Das musst du nur durch "dotted" ersetzen und die untere Zeile löschen.


Edit2:

So, um das noch mal zu erörtern und um es dir einfacher zu machen.
Du kannst den CSS auch so schreiben:

Code:

.bodyline {
    border: 2px dashed #000000;
    border-radius: 60px 7px 60px 7px;
  -webkit-border-radius: 60px 7px 60px 7px;
  -moz-border-radius: 60px 7px 60px 7px;
}

Du sparst dir so einige Zeilen Code.
Zur Erklärung der Radius Angaben:
60px 7px 60px 7px
Diese Angaben beziehen sich auf die Vier Ecken.
Hier mal Farblich:
60px 7px 60px 7px
Die obere Linke Ecke
Die obere Rechte Ecke
Die untere Linke Ecke
Die untere Rechte Ecke

Bei der Dashed Angabe solltest du aber mit den Radien Vorsichtig sein.
Hier wird der Strich in dem Radius als ein Strich dargestellt, was dann so aussieht:
Dashed:


Dotted:


Dashed oder Dotted in Verbindung mit solch großen Radien ist nicht von Vorteil.
Hier ist es dann besser Solid zu verwenden.

Vielen Dank, hat geklappt (: ~Erledigt

Schön. Ich hoffe das das ganze einigermaßen verständlich war.
Aber nun hast du alle vier ecken auf 60 PX eingestellt.
Ich fand, das der unterschied der einzelnen Ecken reizvoller aussah.

Aber das könnt ihr euch ja jetzt noch überlegen.