Category: CSS

Sometimes, we want to remove the border from IFrame with CSS.

In this article, we’ll look at how to remove the border from IFrame with CSS.

How to remove the border from IFrame with CSS?

To remove the border from IFrame with CSS, we set the frameBorder attribute.

For instance, we write

<iframe src="myURL" width="300" height="300" frameBorder="0">
  Browser not compatible.
</iframe>

to set the frameBorder attribute to 0 to hide the border.

Conclusion

To remove the border from IFrame with CSS, we set the frameBorder attribute.

To force image to resize and keep aspect ratio with CSS, we set the width and height to auto.

For instance, we write

img {
  display: block;
  max-width: 230px;
  max-height: 95px;
  width: auto;
  height: auto;
}

to set the max width and height of the img element.

And we set the width and height to auto to make the image keep its aspect ratio while keeping the size as close to the max width and height as possible.

To use wildcard * in CSS for classes, we use attribute selectors.

For instance, we write

div[class^="tocolor-"],
div[class*=" tocolor-"] {
  color: red;
}

to select divs with clas starting with tocolor- with div[class^="tocolor-"].

And we select divs with clas starting including tocolor- with div[class*="tocolor-"].

To add fixed position but relative to container with CSS, we set the contain property of the parent.

For instance, we write

<div class="parent">
  <div class="child"></div>
</div>

to add nested divs.

Then we write

.parent {
  contain: content;
}

.child {
  position: fixed;
  top: 0;
  left: 0;
}

to set contain to content on the parent and set position to fixed on the child to make the child stay fixed in the parent.

To apply multiple transforms in CSS, we set the transform property with values all in 1 line.

For instance, we write

li:nth-child(2) {
  transform: rotate(15deg) translate(-20px, 0px);
}

to set transform to rotate(15deg) translate(-20px, 0px) to rotate by 15 degrees and translate 20px to the left.