Change bslib Card Corner Radius

Question

I'm looking to make the corner of the bslib card more rounded. Here are 3 cards where I'm using the class argument to change elements of the card the first two are the border-radius and the last one is the background color.

library(shiny)
library(bslib)
# UI logic
    ui <- page_fluid(
      card(
        max_height = 200,
        card_header("Card 1"),
        card_body("STUFF"),
        class = "card-border-radius: 50rem;"
      ),
      card(
        max_height = 200,
        card_header("Card 2"),
        card_body("STUFF"),
        class = "border-radius: 20%;"
      ),
      card(
        max_height = 200,
        card_header("Card 3"),
        card_body("STUFF"),
        class = "bg-dark"
      )
    )

# Server logic
    server <- function(input, output, session) {
        
    }

shinyApp(ui, server)

Answer 1

Update

I didn't notice that the color in the card head extended beyond the card border. To address this, I've added another class so that it forces the header to inherit from its parent.

This new class follows along the same explanation as in my original answer.

library(shiny)
library(bslib)

# UI logic
ui <- page_fluid(
  tags$style(HTML(".card2 {border-radius: 2rem;}
                   .card2h {  /* force inheritance */
                        border-top-left-radius: inherit !important;
                        border-top-right-radius: inherit !important;
                  }")), # creating class style
  card(
    max_height = 200,
    card_header("Card 1"),
    card_body("STUFF")
  ),
  card(
    max_height = 200,
    card_header("Card 2", class = "card2h"),
    card_body("STUFF"),
    class = "card2"       # <<<----- applying the new class
    ),
  card(
    max_height = 200,
    card_header("Card 3"),
    card_body("STUFF"),
    class = "bg-dark"
  )
)

# Server logic
server <- function(input, output, session) {}

shinyApp(ui, server)

---

---

Originally wrote

One method you can use is the tags$style(HTML(" and add a class-based style.

In the explanation of bslib::card, it indicates that class is a place for CSS, but only specific preprogrammed text connected to a class label that bslib is running in the background. So you can either research whether what you're looking for is one of the many, many classes prewritten or you can create your own.

Here's an example of how you can create and apply your own class styles.

library(shiny)
library(bslib)

# UI logic
ui <- page_fluid(
  tags$style(HTML(".card2 {border-radius: 2rem;}")), # creating class style
  card(
    max_height = 200,
    card_header("Card 1"),
    card_body("STUFF")
  ),
  card(
    max_height = 200,
    card_header("Card 2"),
    card_body("STUFF"),
    class = "card2"       # <<<----- applying the new class
    ),
  card(
    max_height = 200,
    card_header("Card 3"),
    card_body("STUFF"),
    class = "bg-dark"
  )
)

# Server logic
server <- function(input, output, session) {}

shinyApp(ui, server)

Let me know if you have any questions or if you run into any issues.