# Add a drop shadow and outline to the Calculator App

**URL:** <https://community.elfsight.com/t/add-a-drop-shadow-and-outline-to-the-calculator-app/80615>\
**Category:** Customization\
**Tags:** calculator\
**Created:** [November 6, 2024, 10:12pm UTC](https://community.elfsight.com/t/add-a-drop-shadow-and-outline-to-the-calculator-app/80615 "2024-11-06T22:12:14Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Forest\_Franzose](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/forest_franzose/32/42672_2.png) [@Forest\_Franzose](https://community.elfsight.com/u/Forest_Franzose)\
**Post date:** [November 6, 2024, 10:12pm UTC](https://community.elfsight.com/t/add-a-drop-shadow-and-outline-to-the-calculator-app/80615/1 "2024-11-06T22:12:15Z")

</div>

Hey! I am trying to adjust the background of my Calculator Widget.

 ![Screenshot 2024-11-06 at 12.10.26 PM](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/8/5/8575bb47b725428f156b2d96617012a87105284b.png)

I would like:

- An outline around the white box
- Drop shadow added to around the white box

Any help with custom css would be appreciated!

- **Link to the page with the widget in question:**

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [November 7, 2024, 2:04pm UTC](https://community.elfsight.com/t/add-a-drop-shadow-and-outline-to-the-calculator-app/80615/3 "2024-11-07T14:04:56Z")

</div>

Greetings and welcome to the Elfsight family, @Forest_Franzose 👋

This code should help:

```auto

[class*="WidgetBackground__Container-sc"] {
  border-width: 2px;
  border-style: solid;
  border-color: grey;
  box-shadow: 0 0 10px grey !important;
}

```

Just add it to the Custom CSS field on the Settings tab of your widget’s settings and let me know if it worked 🙂