Rahmen um Bilder im CSS abrunden?

    Hallo,

    folgendermaßen haben ich Rahmen um die Bilder in den Posts im style.css eingebunden:

    Code
    .content .text img {
border-color:#dbe2ff;
border-width:1px;
padding:3px;
float:left; 
margin-right:16px;
}

    Gibt es eine Möglichkeit, die Rahmen an den Ecken abzurunden? Es reicht ein klein wenig, damit sie zum Theme passen.

    Gruß,

    Felix

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Nicht mit CSS in Version 2(.1). In CSS3 wird es eine solche Möglichkeit eventuell geben. Die Gecko-Browser (Mozilla) können es heute schon. Wenn es dich nicht stört, dass es andere Browser nicht abgerundet anzeigen und das CSS als fehlerhaft markiert wird (Was aber in der Praxis unproblematisch ist, da unbekannte Eigenschaften vom Browser ignoriert werden sollen. Hauptsache ist, dass die Syntax korrekt ist.), dann findest du hier ein Beispiel, wie es geht:
    Rahmen mit abgerundeten Ecken: Tipps und Tricks auf CSS 4 You - The Finest in Stylesheets

    Sehr gut, vielen Dank.

    Mit dem Hinzufügen von

    Code
    -moz-border-radius:10px;
-khtml-border-radius:30px;


    hat es geklappt. Meine Frage ist nun, wie es sich auswirkt? Deine Ausführungen habe ich leider nicht genau verstanden. In meinem Firefox wird es korrekt angezeigt, im IE einfach gar nicht. Es gibt aber keine Fehlermeldungen oder sonstige Probleme? Nur eben das Nicht-Anzeigen?

    Danke,

    Felix

    Wie beschrieben: Browser die diese Eigenschaften nicht kennen (z.B. der IE) ignorieren die Angabe einfach und zeigen den Rahmen ohne die Rundungen an. Probleme gibt es dabei keine. (CSS-Validatoren wie The W3C CSS Validation Service markieren das Stylesheet aber als fehlerhaft, da diese Eigenschaften experimentell sind, und kein offizieller Bestandteil von CSS. Das kannst du in diesem Fall aber ignorieren.)

    PS: Warum verwendest du unterschiedliche Radien für -moz und -khtml?

    ...ich habe die Möglichkeit aufgegriffen und in meine style.css eingefügt.

    Jedoch habe ich den Effekt, dass beim Firefox nur der Header mit abgerundeten Ecken erscheint, jedoch nicht die Bilder im Post.

    Mit dem Safari Browser sind die Bilder im Post auch abgerundet. :confused:

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden