It's similar to SiYuan's Super block:

I tested this, and yes, it is quite similar to the group feature in Capacities. However, I’ve noticed what might be a bug that could be improved: there isn’t enough space on the left side of the super block.

The spacing on the top, right and bottom seems right to me but left is a bit off.

I think if the user hasn't applied any background color, it looks okay. However, once a background color is applied, there should be space on the left to match the top, right, and bottom spaces, so the content looks more balanced. I believe this can be improved.

I tested this, and yes, it is quite similar to the group feature in Capacities. However, I’ve noticed what might be a bug that could be improved: there isn’t enough space on the left side of the super block.

The spacing on the top, right and bottom seems right to me but left is a bit off.

I think if the user hasn't applied any background color, it looks okay. However, once a background color is applied, there should be space on the left to match the top, right, and bottom spaces, so the content looks more balanced. I believe this can be improved.

It would be nice if we could apply borders to blocks as well. For example, in this super block case, I’ve applied a background color, but there should also be an option to apply a border.

This is exactly what I'm looking for:

In addition to background colors, we should have an option to apply borders. This should include various styles like dotted, dashed, and solid lines, along with customizable border width (in pixels) and border color.

You might like the style of this super block:

.protyle-wysiwyg [data-node-id].sb {
    padding: 4px 6px 4px 6px;
	background-color: var(--b3-table-even-background);
	box-shadow: inset 0 0 0 .6px var(--b3-border-color);
}

How to use:

You might like the style of this super block:

.protyle-wysiwyg [data-node-id].sb {
    padding: 4px 6px 4px 6px;
	background-color: var(--b3-table-even-background);
	box-shadow: inset 0 0 0 .6px var(--b3-border-color);
}

How to use:

Yes, I know about Code Snippets, but the problem is that I don’t want to apply this specific style to all blocks. I only want to apply borders to some blocks, not all of them, and Code Snippets can’t solve this issue. Instead, if the developers could implement a border feature, that would be great.

Additionally, regarding the left space: once the user applies a background color, there should be some space on the left, and as soon as the user removes the background color, the left space should be removed. I hope you understand my point—this would look much better.

In addition to background colors, we should have an option to apply borders. This should include various styles like dotted, dashed, and solid lines, along with customizable border width (in pixels) and border color.

I totally agree, blocks should have an option for borders as well. Sometimes I want to use this feature myself but, unfortunately, can’t. I don’t think it would be difficult to add this small feature enhancement.

plugin custom-block，With Border (outline)

As far as I know of notes app, there is no function to add a border to the block, and I don't think SiYuan will add this function.

Currently, in SiYuan you can achieve this functionality by using code snippets and custom attributes (just a little bit of trouble):

.protyle-wysiwyg [data-node-id][custom-box-shadow="true"] {
	box-shadow: inset 0 0 0 2px #f5822e;
}

If adding borders to blocks isn't possible, then at least the Custom Attribute UI could be improved.

For example, instead of having to create box-shadow or other CSS styles for specific blocks repeatedly, there could be a way to set these styles once. Maybe we could have a section in CSS Snippets or a separate Custom menu in Settings where we can define styles like box-shadow.

Once added, these predefined styles could appear as options in the custom settings for each block, allowing us to easily click and apply them as needed. I think this could be a practical solution if adding borders directly isn't feasible.

Please think about it; it would definitely speed up the process.

Edit: But the problem is with the data-node-id, as every block has a unique ID. So, if we set a CSS style for custom attributes once, how would it detect and apply the CSS to that specific block?

Also, am I getting this right? It's not applying the styles.

Refer to my operation. And I think the sy-quick-attr plugin is very convenient:

.protyle-wysiwyg [data-node-id][custom-box-shadow="true"] {
	box-shadow: inset 0 0 0 2px #f5822e;
}

{
    "Border": {
        "box-shadow": "true"
    },
    "Cancel Border": {
        "box-shadow": ""
    }
}

Thank you for your discussion. We will close the issue first.

Refer to my operation. And I think the sy-quick-attr plugin is very convenient:

.protyle-wysiwyg [data-node-id][custom-box-shadow="true"] {
	box-shadow: inset 0 0 0 2px #f5822e;
}

{
    "Border": {
        "box-shadow": "true"
    },
    "Cancel Border": {
        "box-shadow": ""
    }
}

video.mp4

Thanks, this is useful. I appreciate it.

I think if the user hasn't applied any background color, it looks okay. However, once a background color is applied, there should be space on the left to match the top, right, and bottom spaces, so the content looks more balanced. I believe this can be improved.

Would you please fix this issue?

Actually this isn't a problem that needs to be fixed, the Super block is designed to have no left and right padding to keep the text aligned:

Users can modify it to any style they like:

.protyle-wysiwyg [data-node-id].sb {
    padding: 4px 6px 4px 6px;
	background-color: var(--b3-table-even-background);
	box-shadow: inset 0 0 0 .6px var(--b3-border-color);
}

Appreciated.