Groove/ridge borders?

[bzz-bee]

In css, I can give elements a groove or a ridge border for a 3D look. Is there a way to emulate that for rofi?

[DaveDavenport]

Don't know what groove/ridge exactly does in css.

[voidscripty]

Groove: Look Like It Carved in to The Screen. Achieved By Top-Left: Dark + Bottom-Right: Light.
Ridge: Look like it is Popping Out. Achieved by Top-Left: Light + Bottum-Right: Dark

[voidscripty]

Emulating CSS groove/ridge borders in Rofi (.rasi)

Since Rofi's .rasi format does not natively support the groove or ridge border styles found in CSS, you can emulate the 3D effect by leveraging Rofi's ability to color each side of a border independently.

In CSS, groove and ridge effects are essentially just 2-pixel borders where the colors are inverted on the inner and outer halves to simulate lighting/depth. In Rofi, we can achieve this by using two nested elements (like window and mainbox) or by using the specific border-color syntax.

Option 1: The "Simple 3D" Effect (Pseudo-Ridge)

You can simulate a 3D "raised" look on any element by setting different colors for the top/left (highlight) and bottom/right (shadow) borders.

* {
    /* Define highlight and shadow colors */
    border-light:  #ffffff55; /* Transparent white for highlight */
    border-dark:   #00000055; /* Transparent black for shadow */
}

window {
    border:       2px;
    /* Order: Top, Right, Bottom, Left */
    border-color: @border-light @border-dark @border-dark @border-light;
}

[aDevBilly]

it didnt work?

[voidscripty]

Alternative Option : The "Double-Walled" Groove (Nested Element)

window {
    border: 2px;
    border-color: #333333 #777777 #777777 #333333; /* Darker outside top/left */
    padding: 0px;
}

mainbox {
    border: 2px;
    border-color: #777777 #333333 #333333 #777777; /* Lighter inside top/left */
}