> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.stylishcostcalculator.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Frontend Styling: I need inspiration to design my calculator's frontend look

# ${color}[#314AF3](User 1)

This user has used Frontend Style #2 with the border-line feature turned on. They used a different colour background for the calculator compared to the rest of the page. This helps the user visualize where the calculator starts and ends.

```css
.scc_wrapper {
    padding: 60px;
    background-color: #f8f8f8;
    padding-top: 0px!important;
    margin: 0 auto!important;
    box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.3);
}```

![](https://storage.crisp.chat/users/helpdesk/website/c5f0153cc3f4b000/image_t0d2fj.png)

```css
.scc_wrapper {
    padding: 60px;
    background-color: #f8f8f8;
    padding-top: 0px!important;
    margin: 0 auto!important;
    box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.3);
}```