How to Add a Vertical Text with CSS Cross-Browser

If you have faced the problem of creating a vertical text, you can use the transform property, which allows changing the position of an elements’ transformation.

Using the transform property, we can rotate the element 90 degrees counterclockwise. We’ll need to use vendor extensions as well.

Let’s start with creating HTML.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Create HTML

  • Place a <div> with a class name "rotate" inside the <body> element.
  • Write content inside the <div> element.
<div class="rotate">W3Docs</div>

Add CSS

  • Set the transform property to "rotate" to rotate the block of text 90 degrees counterclockwise.
  • Add the transform-origin property set to "50% 50%".
  • Style the content using the font-size and font-weight properties.
  • Add the filter property.
.rotate {
  font-size: 40px;
  font-weight: bold;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Now we can see the result of our code.

Example of adding a vertical text with CSS cross-browser:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .rotate {
        font-size: 40px;
        font-weight: bold;
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
        -webkit-transform-origin: 50% 50%;
        -moz-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -o-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3);
      }
    </style>
  </head>
  <body>
    <div class="rotate">W3Docs</div>
  </body>
</html>

Result

W3Docs