# Set size, borders and effects

This article describes the **Styles** tab settings that give a block its shape: its size and position, its borders and corners, its shadow, its effects and its transitions. You will be able to set them for each state and each screen.

## Before you start

- The settings in this article are in the sidebar’s **Styles** tab, when a block is selected. They are spread across the **Size & Spacing**, **Borders**, **Effects** and **Transitions** panels.
- As long as you touch nothing, the block keeps its natural rendering. The values shown in empty fields are not applied to the block.
- The inner and outer margins of the **Size & Spacing** panel are described in [Space your blocks](https://lovelyrender.com/documentation/space-blocks/).

## Choose where the setting applies

At the top of the **Styles** tab, two rows decide what you are setting. All the panels in this article write to the chosen state and screen.

| Row | Choices | Effect |
| --- | --- | --- |
| States | **Default**, then the block’s states, for example **Hover**, **Focus** or **Active** | The setting applies when the block is in that state. **Default** gives the base value. |
| Screens | **Overall**, **Desktop**, **Tablet**, **Mobile** | **Overall** gives the value for all screens. From its width, a screen keeps only the values that differ from **Overall**. |

![The top of a card’s Styles tab: the row of states Default, Hover and Active, the row of screens, then the Size & Spacing panel with Hide this block, Inline flex, the container width and the six dimension fields.](https://static.lovelyrender.com/uploads/2026/10/969-doc-pages2-taille.png)

A colored dot marks each screen that carries a value for the current state. Screens do not copy one another: a tablet with no value of its own shows the one from **Overall**, not the one from desktop.

**Warning:** If a setting applies only on hover, you were on the **Hover** state. Go back to **Default** to set the base value.

When the block carries a [registered style](https://lovelyrender.com/documentation/save-block-style/), a field that inherits from it is shown dimmed. Depending on the situation, a button next to the field gives back the style’s value, removes the inheritance or clears your local value.

## Set the size of a block

The **Custom dimensions** section of the **Size & Spacing** panel sets the width and height of the block.

1. Select the block, open the **Styles** tab, then the **Size & Spacing** panel.
2. For a centered container, click a **Container width** value, for example **1024**. The block takes this maximum width and centers itself.
3. For a precise constraint, enter a value in one of the six fields and choose its unit.

| Setting | Effect | Values |
| --- | --- | --- |
| **Container width** | Sets the maximum width. Any value except **Fluid** centers the block with automatic margins. | **Fluid** (100%), 1920, 1600, 1440, 1280, 1024 and 640 |
| **Width**, **Min W**, **Max W** | The block’s width, its minimum width and its maximum width. | `%`, `px`, `dvh`, `svh`, `dvw` and `svw` |
| **Height**, **Min H**, **Max H** | The block’s height, its minimum height and its maximum height. | The same units |
| **Aspect ratio** | The ratio between width and height, for example `16` / `9`. The value is saved when both numbers are filled in. | Two numbers, 1 at minimum |

Clicking the chosen **Container width** value a second time does not cancel it. To remove it, click the reset button next to the label.

The ƒ button, next to a field’s label, combines two values, for example `100dvh − 92px` for a section that fills the screen under a 92 px header. The middle button switches from addition to subtraction.

In a carousel, one more unit is available: `cqi`, a share of the carousel’s width. A card set to `33.333cqi − 16px` shows three side by side, whatever the screen.

Aspect ratios are set per screen: an image at `21` / `9` on a computer can switch to `4` / `5` on a phone.

## Hide a block on a screen

The **Hide this block** switch removes the block from the page for the chosen screen. To adapt a section to the phone, duplicate it, adapt the copy, then hide each version on the screen where it does not fit.

| State | Effect |
| --- | --- |
| **Default** | The block is hidden until it becomes active. |
| **Active** | The block is hidden while it is active. |
| Another state, for example **Checked** or **Invalid** | The block is hidden while it is in that state. |
| **Hover** and **Focus** | The switch is not shown. |

The next switch makes the block inline, next to its neighbors. Its label follows the block’s layout: **Inline block**, **Inline flex** or **Inline grid**.

The **Visibility** setting of the **Effects** panel also hides a block, but keeps its place in the page.

## Position a block

The **Position** menu takes a block out of the normal flow of the page. It is set per state and per screen: a panel stuck in place on a computer can go back to normal on a phone.

| Position | Effect |
| --- | --- |
| **Default** | The block follows the normal flow of the page. Default value. |
| **Relative** | The block shifts from its normal place, without moving its neighbors. |
| **Sticky** | The block scrolls with the page up to the edge of the screen, then stays fixed there. |
| **Absolute** | The block leaves the flow and is placed in the nearest positioned parent block, for example a section set to **Relative**. |
| **Fixed** | The block stays in the same place in the window, whatever the scrolling. For a header or a floating button. |

As soon as a position other than **Default** is set on the displayed screen, the **Offset** section appears with four fields: **Top**, **Right**, **Bottom** and **Left**. They accept the same units and the same ƒ button as the dimensions.

A **Sticky** or **Fixed** block at the top of the screen hides nothing. A link to an anchor, the element reached with the keyboard and the step of a form stop 16 px below it. The site measures its height at each change of size or screen.

The **Float** setting makes a block float left or right. The neighboring text flows around it.

### Manage what overflows

The **Overflow** setting decides what happens to content larger than its block. The choices are icons, with their name on hover.

| Choices | Effect |
| --- | --- |
| **Use inherited value** | No rule. Default value. |
| **Visible** | The overflowing content stays visible. |
| **Hidden** | The overflowing content is cut off. |
| **Scroll** | The block shows scroll bars. |
| **Auto** | The block scrolls only if its content overflows. A table too wide for a phone is read by swiping sideways. |
| **Clip** | The overflowing content is cut off. The block does not become a scroll area. Choose it on a section that contains a **Sticky** block, which **Hidden** would stop from sticking. |
| **Swipe** | The children form a row with no scroll bar, which is swiped with a finger. The row snaps to each child. With a mouse, the row scrolls with the wheel and Shift. |
| **Inherit** | The block takes the setting of its parent. |

## Add a border

1. In the **Styles** tab, open the **Borders** panel. A preview of the block appears at the top of the panel.
2. Under **Border**, enter a **Thickness** in pixels. The style and the color become available.
3. Choose the **Style** among **Solid**, **Dashed**, **Dotted** or **Double**.
4. Click the swatch and choose the color.

![The Borders panel of a card: the preview, the border with its thickness, style and color, the corner radius set to 16px, the warning about images, the corner shape and the Elevation 1 box shadow.](https://static.lovelyrender.com/uploads/2026/10/972-doc-pages2-bordures.png)

The **Split** button, at the right of the row, gives each side its own border: **Top**, **Right**, **Bottom** and **Left**. The **Merge** button goes back to a single border. A thickness of 0 erases the border.

## Round the corners

The **Border radius** field is a dropdown list of the radii of your design system, each shown by its value. Choose a radius to apply it to all corners, or **None** to remove the rounding. The **Split** button gives each corner its own list.

| Radii | Values |
| --- | --- |
| Eight steps, the same as the spacing scale | 2, 4, 8, 16, 24, 32, 64 and 128 px |
| A ninth step | 50%, which rounds a square into a circle and a rectangle into an ellipse |

The design chosen from the catalog can change these values. Buttons, form fields and their dropdown lists take the 4 px radius: editing this step rounds them all at once.

The **+** button creates a radius and the pencil edits the one that is applied. Only site administrators see these two buttons. The form asks only for a value and a unit (`px`, `em`, `rem` or `%`). A change applies to all the blocks that use this radius. A value exists only once: a second 8 px radius is refused.

The **Switch to advanced mode** button shows eight fields with free units, for elliptical corners: a horizontal radius and a vertical radius per corner.

When a radius is set without the overflow being hidden, the panel shows **Images may not follow the rounding of the corners.** Click **Set overflow to Hidden.** so that the image follows the rounding.

The **Corner shape** field changes the shape of a rounded corner: **Round**, **Scoop**, **Notch**, **Bevel** or **Squircle**, between square and circle. It stays grayed out as long as no radius is set.

## Add a box shadow

A shadow is an entry of your design system, like a color. You create it once and place it on as many blocks as you want. Editing it edits it on all the blocks that carry it.

1. In the **Borders** panel, open the **Box shadow** list and choose a shadow, for example **Elevation 2**.
2. To remove it, choose **None**. The block takes back the shadow of its registered style if it carries one.

Each site receives five shadows, **Elevation 1** to **Elevation 5**. Each stacks a sharp black shadow at 30% and a diffuse black shadow at 15%. They move away and soften as the level goes up.

| Shadow | Sharp shadow (Y, blur) | Diffuse shadow (Y, blur, spread) |
| --- | --- | --- |
| **Elevation 1** | 1 px, 2 px | 1 px, 3 px, 1 px |
| **Elevation 2** | 1 px, 2 px | 2 px, 6 px, 2 px |
| **Elevation 3** | 1 px, 3 px | 4 px, 8 px, 3 px |
| **Elevation 4** | 2 px, 3 px | 6 px, 10 px, 4 px |
| **Elevation 5** | 4 px, 4 px | 8 px, 12 px, 6 px |

You can edit the layers of a shadow that comes with your site: your version applies to your site. A shadow that comes with your site cannot be renamed or deleted.

### Create a shadow

1. To the right of the **Box shadow** list, click **+**. The form opens with one layer.
2. Enter a **Name**. This field is required, because the name identifies the shadow in the list.
3. In the **Layer 1** card, set the **X** and **Y** offset, the **Blur** and the **Spread**, in pixels, then the color.
4. To stack a second shadow, click **Add a layer**.
5. Click **Save**. The shadow is placed on the block.

![A shadow form: the Name field, two layers with their X, Y, Blur and Spread fields, the Inset switch and the color, then Add a layer, Cancel and Save.](https://static.lovelyrender.com/uploads/2026/10/976-doc-pages2-ombre.png)

| Setting | Effect | Default value |
| --- | --- | --- |
| **X**, **Y** | The horizontal and vertical offset, in whole pixels. A negative value is accepted. | Empty |
| **Blur** | The blur, in pixels, 0 or more. | Empty |
| **Spread** | The spread, in pixels. When negative, it tightens the shadow. | Empty |
| **Inset** | Draws the layer inside the block. | Off |
| Color | A solid color, no gradient. | None |

A shadow has up to eight layers. The first is painted on top of the following ones: the **Move up** and **Move down** arrows change their order. Saving is refused if the name is empty, or if a layer sets no offset, no blur, no spread and no color.

The pencil, next to **+**, edits the chosen shadow. The form shows **Your changes will apply to every block that uses it.** For an effect specific to one block, create a shadow instead.

**Note:** A color chosen from the swatches of your palette stays linked to that color. Changing your brand color changes the shadow with it. As long as a shadow uses it, the color cannot be deleted.

### Lift a card on hover

1. On the **Default** state, choose **Elevation 1** in **Box shadow**.
2. Switch to the **Hover** state and choose **Elevation 3**.
3. Go back to the **Default** state and add a 200 ms transition as in the “Smooth a state change” section.

The card lifts under the pointer and comes back down smoothly.

## Transform a block

With the **Effects** panel, you rotate, move, enlarge or skew a block without changing the space it takes up in the page. It opens by itself when an effect is already set.

![The top of the Effects panel: the rotation with its shortcuts from −135° to 180° and its slider, the X and Y translation, the linked X and Y scale, then the X and Y skew.](https://static.lovelyrender.com/uploads/2026/10/979-doc-pages2-effets.png)

| Setting | Effect | Default value |
| --- | --- | --- |
| **Rotation** | Rotates the block, from −180° to 180°, with shortcuts from −135° to 180°. At 0°, it straightens a block tilted by a style or by the resting state. | 0° |
| **Translate** | Moves the block on **X** and **Y**, in `px`, `%`, `vw`, `vh`, `rem` or `em`. | 0 |
| **Scale** | Enlarges or shrinks the block, from 0 to 10, in steps of 0.01. 1 is the original size. A button links or unlinks **X** and **Y**. | 1, X and Y linked |
| **Skew** | Skews the block on **X** and **Y**, from −80° to 80°. Beyond that, the block becomes invisible. | 0° |
| **Transform origin** | The pivot point of the rotation, the scale and the skew, in `%`, `px` or `em`. 0% is the top or left edge, 100% the bottom or right edge. An empty field keeps the axis centered. | 50 %, 50 % |

The transformations stay applied during the block’s [animations](https://lovelyrender.com/documentation/animate-block/): a skewed card slides while staying skewed.

## Set a block’s appearance

| Setting | Effect | Default value |
| --- | --- | --- |
| **Opacity** | The block’s transparency, from 0 to 100%. | 100 % |
| **Z-index** | The stacking order, a whole number. A card that moves in front of its neighbors on hover is set in the **Hover** state. | Empty |
| **Filter** | A filter from your design system applied to the block, for example a blur, grayscale, sepia or brightness. | **None** |
| **Clip path** | Cuts the block into a shape from your design system. | **None** |
| **Visibility** | **Visible** or **Hidden**. **Hidden** hides the block while keeping its place. | None |
| **Blend mode** | Mixes the block with what is behind it, for example **Multiply** or **Screen**. | **Default** |
| **Cursor** | The shape of the pointer when hovering over the block, for example **Pointer (hand)**. | **Default** |
| **Pointer events** | **None** makes the block stop reacting to the mouse. | **Auto** |

A filter and a clip path are created with the **+** button of their field and edited with the pencil. These buttons, like those for shadows and radii, are reserved for site administrators: other roles choose from the list. Like a shadow, they serve all the blocks that carry them. The **Effects** panel’s filter acts on the block itself. The backdrop filter acts on what is behind the block: it is described in [Color a block](https://lovelyrender.com/documentation/color-block/).

### Cut a block into a shape

The clip builder first asks for a **Shape**. All values are percentages of the block’s size: the same clip suits a banner and a small card.

| Shape | Settings | Purpose |
| --- | --- | --- |
| **Rectangle** | One inset per side and an optional **Corner rounding**. | Cropping an image. |
| **Circle** | The **Radius** and the position of the center, **Center X** and **Center Y**. | A round portrait. |
| **Ellipse** | The **Horizontal radius**, the **Vertical radius** and the position of the center. | An oval, an arch. |
| **Polygon** | X and Y **Points**, three at minimum, with **Add a point** and **Remove this point**. | A slanted banner, a diamond. |

**Warning:** The clip applies to the whole block: its box shadow and what overflows are cut by the same shape.

An opacity, a filter or a clip set on the block cannot be combined with an entrance animation, which animates them itself. Set each on one side only.

## Keep the focus ring

A visitor who navigates with the keyboard sees where they are thanks to the focus ring. Links, buttons, form fields, switches, checkboxes and accordion questions receive a 2 px ring when they take keyboard focus. Its color follows the element’s text color. It does not appear with the mouse.

The **Outline** setting of the **Effects** panel draws a line around the block without changing its size, unlike a border. It requires a **Thickness** in pixels, a **Style** and a color. The **Offset** field, from −99 to 99 px, appears as soon as a thickness is set.

To replace the focus ring with your own, set the outline on the **Focus** state. Your outline is shown in place of the ring.

**Warning:** Removing the inherited value of the outline also removes the block’s focus ring. The block then has no keyboard cue at all. To remove only the outline shown at rest, set the **Focus** state.

## Smooth a state change

With the **Transitions** panel, a state change glides instead of jumping: a color, a shadow or a border that changes on hover, on focus or when a checkbox is checked. Without a transition, the change is instant.

1. Select the block, choose the **Default** state and open the **Transitions** panel.
2. Click **Add transition**. A row appears.
3. Under **Properties**, leave **All**, or choose **Custom** to name the properties concerned.
4. Set the **Duration (ms)**, the **Timing function** and the **Delay (ms)**.
5. Hover over the preview bar to see the chosen rhythm.

![A transition in the Transitions panel: Properties set to All, a duration of 300 ms, the Ease out timing function, a delay of 0 ms, the preview bar and the Add transition button.](https://static.lovelyrender.com/uploads/2026/10/982-doc-pages2-transitions.png)

| Setting | Effect | Default value |
| --- | --- | --- |
| **Properties** | **All** the properties that change, or **Custom**. This second choice appears when the block already has settings on another state. It then offers those settings. | **All** |
| **Duration (ms)** | The duration of the change, in milliseconds. | 300 |
| **Timing function** | The curve of the movement: **Ease in out**, **Ease in**, **Ease out**, **Linear** or **Custom (cubic-bezier)**. | **Ease out** |
| **Delay (ms)** | The delay before the start, in milliseconds. | 0 |

Several rows can stack: the color in 200 ms and the shadow in 500 ms, each at its own pace.

**Tip:** Place the transition on the **Default** state: it plays going and coming back. Placed on **Hover** alone, it plays only when the hover begins. The block then goes back to its base value at once.

A visitor can ask for less motion, in their device settings or with an animation selector. They then see nothing move on hover or focus. The rotation, translation, scale and skew of the **Hover** and **Focus** states do not apply. The changes of color, background, border, shadow, opacity and filter stay visible, smoothly.

## See also

- [Space out your blocks](https://lovelyrender.com/documentation/space-blocks/)
- [Save a block’s style](https://lovelyrender.com/documentation/save-block-style/)
- [Animate a block](https://lovelyrender.com/documentation/animate-block/)
- [Color a block](https://lovelyrender.com/documentation/color-block/)