Borders and Outlines

Pigeon4332·8/31/2021 in Support Requests - Designing Your Wiki

I'm trying to design a header, where the border is separated from the header by some arbitrary amount. I can easily do this for other elements by using both 'border' and 'outline', but I would like this header to have rounded corners.

I can round the corners of the 'border', using 'border-radius. However, I cannot find a way to do the same for the 'outline', as 'outline-radius' is not a property (at least as far as I'm aware).

I would also like the header to be "themeable", where the "theme" parameter can be changed to alter the colour of the background and text etc.

Is there any other way to achieve my desired result?

Template: https://until.fandom.com/wiki/Template:CustomHeader

Common.css: https://until.fandom.com/wiki/MediaWiki:Common.css

(CustomHeader can be found right at the bottom at line 2767)

Thanks in advance :3

Andrewds1021·8/31/2021

It looks to me like you are already on the right path regarding theming. However there is no such thing as an outline radius. Even using a border image doesn't follow the border radius. Could you link to an example use of this separation? Usually, you use the border as the border and put spacing around the content using padding. Also, just in case you were unaware, outlines will overlap with surrounding content unless you have properly set the margins as well.

Pigeon4332·8/31/2021

Mhm. Both the quote and the infobox have the same 'border'.

https://until.fandom.com/wiki/Aina_Sasaki

Andrewds1021·8/31/2021

Well, the CSS for the two are separate so, if you don't want it for one of them, just deleted the CSS that is adding it. Or perhaps I am misinterpreting your comment.

Pigeon4332·9/1/2021

Maybe. I didn't explain very well so don't worry :3

The quote box and infobox on that page I linked shows an example of the 'separated border'. I was trying to apply the same style to the 'CustomHeader' but couldn't get it to work because of the rounded edges.

Is that any clearer? :3

What do you think?