Animated Borders

Animated Borders allow you to add subtle motion effects to the borders of your sections, containers, or blocks. The available options are slightly different between Elementor and Gutenberg, so here’s how each one works.

Elementor

To enable an animated border in Elementor:

1. Select the widget, column, or section.
2. Go to the Style → Border panel.
3. Set a solid border first (animated borders appear only after a solid border is applied).
4. Enable Animated Border.

Available Effects

Hover Glow

Adds a subtle glowing effect that intensifies on hover:

Rotate

Rotates a single-color border around the element:

Gradient Rotate

Rotates a two-color gradient border:

Gradient Rotate (2)

Same effect, but with a different animation:

Multicolor Rotate (4)

Cycles 4 colors evenly around the border:

Multicolor Rotate (8)

Uses 4 colors, but repeats them to create 8 segments for a denser rotation:

Multicolor Rotate (12)

Uses 4 colors, repeated to create 12 segments for the most dynamic version:

Settings

• Type (animation style).
• Colors (primary / secondary depending on the effect).
• Speed (seconds) — controls animation speed.

Gutenberg (UiCore Blocks)

Animated borders in Gutenberg work directly inside the Border controls of UiCore Blocks.

1. Select your UiCore block or container.
2. Open the Style → Border panel.
3. Scroll to the end of the Border Types list.
4. Choose one of the animated border types:

Available Effects

Animated Gradient

Rotates a two-color gradient border:

Hover Glow

Adds a subtle glowing effect that intensifies on hover:

Settings

• Colors (Hover Glow uses a base and hover color, while Animated Gradient allows you to add an unlimited number of colors to the mix).