--- url: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/element-einstellungen/rahmen-und-schatten' title: 'Rahmen, abgerundete Ecken und Schatten hinzufügen | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-23T23:56:46+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Rahmen Sie eine Card ein, runden Sie die Ecken eines Fotos ab oder heben Sie einen Kasten mit einem Schatten von der Seite ab. All dies stellen Sie im Style-Panel des Elements ein und beim Darüberfahren ändern Sie es im Hover style-Panel. Nutzen Sie es, um eine Card hervorzuheben. Für denselben Rahmen auf einer ganzen Card-Serie hält eine geteilte Klasse sie einheitlich. Das Video folgt dem Rezept unten: Es macht aus einem Textblock eine Card mit Rahmen, runden Ecken und einem Schatten, der beim Darüberfahren tiefer wird. tags: - 'Style your elements' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Rahmen, abgerundete Ecken und Schatten hinzufügen' description: |- Rahmen Sie eine Card ein, runden Sie die Ecken eines Fotos ab oder heben Sie einen Kasten mit einem Schatten von der Seite ab. All dies stellen Sie im Style-Panel des Elements ein und beim Darüberfahren ändern Sie es im Hover style-Panel. Nutzen Sie es, um eine Card hervorzuheben. Für denselben Rahmen auf einer ganzen Card-Serie hält eine geteilte Klasse sie einheitlich. Das Video folgt dem Rezept unten: Es macht aus einem Textblock eine Card mit Rahmen, runden Ecken und einem Schatten, der beim Darüberfahren tiefer wird. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-23T23:56:46+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/element-einstellungen/rahmen-und-schatten' articleSection: 'Elemente gestalten' - '@type': WebPage '@id': 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/element-einstellungen/rahmen-und-schatten' description: |- Rahmen Sie eine Card ein, runden Sie die Ecken eines Fotos ab oder heben Sie einen Kasten mit einem Schatten von der Seite ab. All dies stellen Sie im Style-Panel des Elements ein und beim Darüberfahren ändern Sie es im Hover style-Panel. Nutzen Sie es, um eine Card hervorzuheben. Für denselben Rahmen auf einer ganzen Card-Serie hält eine geteilte Klasse sie einheitlich. Das Video folgt dem Rezept unten: Es macht aus einem Textblock eine Card mit Rahmen, runden Ecken und einem Schatten, der beim Darüberfahren tiefer wird. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Startseite item: 'https://dxpr.com/de' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: de --- [Hilfe-Center](/de/hc)/[Dokumentation](/de/hc/dokumentation) /[DXPR Builder lernen](/de/hc/documentation/learn-dxpr-builder) /[Seiten erstellen](/de/hc/documentation/learn-dxpr-builder/build) /[Elemente gestalten](/de/hc/documentation/learn-dxpr-builder/element-settings) # Rahmen, abgerundete Ecken und Schatten hinzufügen. DXPR Builder lernenSeiten erstellenElemente gestalten ## In diesem Leitfaden Verwandte Leitfäden - [Innen- und Außenabstände von Elementen festlegen](/de/hc/dokumentation/dxpr-builder-lernen/element-einstellungen/abstaende) Rahmen Sie eine Card ein, runden Sie die Ecken eines Fotos ab oder heben Sie einen Kasten mit einem Schatten von der Seite ab. All dies stellen Sie im **Style**-Panel des Elements ein und beim Darüberfahren ändern Sie es im **Hover style**-Panel. Nutzen Sie es, um eine Card hervorzuheben. Für denselben Rahmen auf einer ganzen Card-Serie hält eine geteilte Klasse sie einheitlich. Das Video folgt dem Rezept unten: Es macht aus einem Textblock eine Card mit Rahmen, runden Ecken und einem Schatten, der beim Darüberfahren tiefer wird. ## Bevor Sie beginnen - Öffnen Sie die Seite in DXPR Builder; wenn Sie auf ein Element zeigen, erscheint seine Steuerleiste mit **More**. Neu im Builder? Siehe [Ihre erste Seite](/de/hc/dokumentation/dxpr-builder-lernen/erste-schritte/erste-seite). - **Speichern** im Dialog behält eine Änderung im Editor. **Speichern** in der Builder-Symbolleiste über Ihrem Inhalt speichert die Seite und zeigt „Saved field“. - **Heben Sie eine Sache hervor.** Ein Rahmen oder ein Schatten lenkt den Blick auf ein Schlüsseldatum, ein Angebot oder ein Zitat. Setzen Sie ihn auf alles und er wirkt nicht mehr. - **Halten Sie eine Serie einheitlich.** Für denselben Rahmen auf vielen Cards speichern Sie eine Card als Vorlage oder nutzen Sie eine geteilte Klasse. Siehe [HTML-ID und Klassen](/de/hc/dokumentation/dxpr-builder-lernen/element-einstellungen/eigenes-css). - **Lassen Sie das Theme Schatten abstimmen.** Die fünf **Drop shadow**-Level sind einmal für die ganze Website definiert. Ihr Theme kann ein Level umgestalten und jedes Element, das es nutzt, folgt. ## Rezept: eine hervorgehobene Card Sie erhalten einen weichen Kasten mit dünnem Rahmen in Ihrer Markenfarbe. Er hat runde Ecken und einen Schatten, der beim Darüberfahren wächst. 1. Fahren Sie mit der Maus über das **Text**-Element, klicken Sie auf **More** und dann auf **Settings**. 2. Öffnen Sie das **Style**-Panel. Das Boxmodell steht oben. Seine Schlösser stehen zunächst offen; klicken Sie auf das Schloss neben **Padding**, um es zu schließen, sodass sich seine vier Seiten gemeinsam bewegen. 3. Klicken Sie auf die Oberseite von **Padding**, geben Sie 32 ein und drücken Sie die Eingabetaste. Alle vier Seiten zeigen nun 32px. 4. Wählen Sie eine helle **Background**-Farbe, zum Beispiel ein blasses Grau. 5. Stellen Sie **Border style** auf **Solid**. 6. Schließen Sie das Schloss neben **Border**, klicken Sie dann auf eine seiner Seiten, geben Sie 1 ein und drücken Sie die Eingabetaste. 7. Wählen Sie eine **Border color**, stellen Sie **Border radius** auf 16 und **Drop shadow** auf 3. 8. Öffnen Sie das **Hover style**-Panel und stellen Sie **Drop shadow** auf 5. 9. Klicken Sie im Dialog auf **Speichern** und dann in der Symbolleiste auf **Speichern**. 10. Wählen Sie **Preview** im Ansichtsmenü (das Augen-Symbol) und zeigen Sie auf die Card. Ihr Schatten vertieft sich. ## Was Sie sehen Die Card hat einen dünnen Rahmen in Ihrer Farbe, runde Ecken und einen weichen Schatten darunter. In **Preview** wächst der Schatten tiefer, solange der Zeiger über der Card ist, und beruhigt sich, wenn er sie verlässt. ## Wie ein Rahmen gebaut ist Ein Rahmen braucht drei Einstellungen und das Panel verteilt sie. Stellen Sie alle drei ein: 1. **Border style** wählt die Linie: **Solid**, **Dotted** oder **Dashed**. Auf **Theme defaults** haben die meisten Elemente gar keinen Rahmen. **None** entfernt einen Rahmen, den Ihr Theme zeichnet. 2. Der **Border**-Ring des Boxmodells setzt die Breite jeder Seite, von 0 bis 50 px. Lassen Sie ihn leer, nutzt der Browser seine eigene Breite von etwa 3 px. 3. **Border color** setzt die Farbe. Lassen Sie sie leer, nimmt der Rahmen die Farbe des Texts. **Border radius** rundet alle vier Ecken, von 0 bis 100 px. Er rundet auch Hintergrund und Schatten. Auf einem **Image** rundet er das Bild selbst. Für einen Kreis machen Sie das Element quadratisch. Stellen Sie dann **Border radius** auf die halbe Breite in Pixeln: 100 für ein Element, das 200 px breit ist. Für alles Breitere fügen Sie unter **HTML classes** die Klasse **Circular (50% radius)** hinzu. Auf einem **Image** rundet diese Klasse den Rahmen um das Bild, nicht das Bild, nutzen Sie dort also **Border radius**. ## Drop-shadow-Level | Level | Schatten unter dem Element | |---|---| | 0 | Keiner von DXPR Builder; Ihr Theme entscheidet | | 1 | 2 px nach unten, 7 px Weichzeichner, 20 % Schwarz | | 2 | 4 px nach unten, 12 px Weichzeichner, 30 % Schwarz | | 3 | 5 px nach unten, 25 px Weichzeichner, 30 % Schwarz | | 4 | 8 px nach unten, 38 px Weichzeichner, 30 % Schwarz | | 5 | 12 px nach unten, 57 px Weichzeichner, 30 % Schwarz | Dies sind die Standard-Level. Jedes Level ist ein geteilter Stil, kein in Ihrer Seite gespeicherter Wert, sodass ein Theme ein Level für die ganze Website neu abstimmen kann. Für Ihre Entwicklung: Die Level sind die CSS-Variablen `--dxb-box-shadow-1` bis `--dxb-box-shadow-5`. Im **Hover style**-Panel setzt **Drop shadow** das Level, solange der Zeiger über dem Element ist. Der neue Schatten blendet in 0,15 Sekunden ein. Ein höheres Level beim Darüberfahren lässt eine Card angehoben wirken. **HTML classes** bietet mehr Formen: **Lifted drop shadow**, **Raised drop shadow**, **3D shadow** und **Curved horizontal drop shadow**. Dazu gibt es Bootstraps **Small shadow**, **Default shadow** und **Large shadow**. Nutzen Sie einen Schatten pro Element. Bootstraps Schattenklassen schlagen den **Drop shadow**-Regler. ## Wenn Sie Rahmen, Ecken oder Schatten nicht sehen - **Der Rahmen erscheint nicht.** **Border style** steht auf **Theme defaults** oder **None**. Wählen Sie **Solid**, **Dotted** oder **Dashed**. - **Der Rahmen ist dicker als gewünscht.** Es ist keine Breite gesetzt, daher nutzt der Browser etwa 3 px. Stellen Sie die **Border**-Seiten im Boxmodell ein. - **Der Rahmen hat die falsche Farbe.** Eine leere **Border color** übernimmt die Textfarbe. Wählen Sie eine **Border color**. - **Die Ecken bleiben eckig.** Eine Klasse wie **No rounded corners (rounded-0)** unter **HTML classes** oder eine Theme-Regel mit `!important` gewinnt. Entfernen Sie den Chip oder fragen Sie Ihren Webmaster nach der Theme-Regel. - **Die Ecken runden sich, aber es erscheint kein Kreis.** Der Regler stoppt bei 100 px. Nutzen Sie die Klasse **Circular (50% radius)**. - **Drop shadow ändert nichts.** Eine Bootstrap-Schattenklasse wie **Large shadow** unter **HTML classes** gewinnt. Entfernen Sie ihren Chip. Level 1 ist zudem blass, versuchen Sie also Level 3 zum Testen. - **Der Schatten wächst beim Darüberfahren nicht.** Stellen Sie **Drop shadow** im **Hover style**-Panel ein, nicht in **Style**, und wählen Sie ein höheres Level als das ruhende. - **Nur eine Seite hat sich geändert.** Das Schloss neben **Padding** oder **Border** war offen. Schließen Sie es und geben Sie den Wert erneut ein. - **Der Hover-Schatten erscheint nie auf einem Smartphone.** Touchscreens haben keinen Zeiger, daher erscheint ein Hover-Look erst nach einem Tippen. ## Wie geht es weiter? - [Abstände](/de/hc/dokumentation/dxpr-builder-lernen/element-einstellungen/abstaende): Dem Inhalt Raum im Rahmen geben.