Contain javascript within a CSS Rounded Corner contain

[n7as]

I would like to contain this javascript with a CSS rounded corner container with a white background as I can't modify the javascript.


Here is the javascript:

<div>
<script type="text/javascript">
var affiliate_SiteName = "example.net";
</script>
<script type="text/javascript" src="http://www.example.com/widget/">
</script>
<noscript>
<a href="http://www.example.com">Widget for the Day</a>
</noscript>
</div>

[edited by: not2easy at 10:16 pm (utc) on Feb 5, 2019]
[edit reason] snipped link, exemplified [/edit]

[not2easy]

To know the best way to style your <div> it helps to know whether you are using inline styling or a style sheet. It also helps to know the document type - is this in html5, xhtml, html4.1 or something completely different like WordPress or Dreamweaver code?

Basically, you need to give the containing div a class name, then tell that class how it should look, either inline or within your stylesheet. With more information you can get a quick answer.

[lucy24]

To make it clearer what you’re trying to do: Does the script involve some type of user action, like clicking or hovering, and you only want the script to fire when the user is within the rounded-edged area, and not within the leftover corners of the bounding box?

[ClosedForLunch]

This will work as a starting point for you...

<style>
.container {
background-color: white;
border: 1px solid black;
border-radius: 10px;
padding: 10px;
}
</style>

<div class="container">
( Your javascript here )
</div>

[n7as]

That works flawlessly. I did change the border to 10px solid gold and the border-radius to 25px

Thanks for your help