iFrame rounded corners and negative margins

[sgraystar]

How do you suggest I apply rounded corners and negative margins to a frame?

Today the frame size is 638 x 1233 and loads url https://reg.bom.gov.au/places/vic/melbourne/forecast/

This custom CSS works to show only a section of the web page:

Code:

.bom7day iframe {
  margin-top: -300px;
  margin-left: -20px;
}

Attempt to add border-radius only changes the lower right corner:

Code:

.bom7day iframe {
  margin-top: -300px;
  margin-left: -20px;
  border-radius: 8px;
}

Attempt to add extra css only changes top-left and lower-right:

Code:

.bom7day {
  border-radius: 8px;
  overflow: hidden;
}

.bom7day iframe {
  margin-top: -300px;
  margin-left: -20px;
  border-radius: 8px;
}

[admin]

You need to adjust iframe size via CSS. Width should be parent width + 20px, height should be parent width + 300px.

Code:

.bom7day iframe {
  width: ...px !important;
  height: ...px !important;
}

[sgraystar]

Aha, thanks.