Home/ Questions/Q 9106509
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T02:21:21+00:00

I noticed when I use border-radius with padding and the direction of HTML is

  • 0

I noticed when I use border-radius with padding and the direction of HTML is RTL it is not working as expected. It works fine if remove the direction part dir="rtl". The following codes will show how it works without and with dir="rtl"

without dir="rtl":

<!DOCTYPE html>
<html >
  <head>
    <title>test</title>
    </head>
    <body>
        <style type="text/css">
        .main {
            padding:5px;
        }
        .tag{
                  background-color: #0473c0;
                  border-radius: 3px 3px 3px 3px; 
                  padding:5px;
            }
        </style>
        <div class="main">
            <span class="tag">test</span>
        </div>

</body>
</html>

Result:
no problem here

with dir="rtl":

<!DOCTYPE html>
<html dir="rtl">
  <head>
    <title>test</title>
    </head>
    <body>
        <style type="text/css">
        .main {
            padding:5px;
        }
        .tag{
                  background-color: #0473c0;
                  border-radius: 3px 3px 3px 3px; 
                  padding:5px;
            }
        </style>
        <div class="main">
            <span class="tag">test</span>
        </div>

</body>
</html>

Result:enter image description here

As you can see the text moved to the left and background moved to the right. I tested it on IE10 and IE9. Is there any fix for this problem or any work around?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Making the .tag display as an inline-block seems to resolve this:

      .tag {
    background-color: #0473c0;
    border-radius: 3px 3px 3px 3px;
    padding:5px;
    display: inline-block;
  }

    See also this jsfiddle for a working demo. (Tested in IE10, Win8).

    However, I’m not sure whether this messes with the flow of text in RTL documents in any way.

    • 0