CODEWITHSUNDEEP
htmlcssinternet-explorer
Adam
Adam

Reputation: 1493

Why is border radius not showing up in IE?

How do I get border radius to work in IE?

I have an <input type=image> element in my html. In my css I have border-top-right-radius:12px; and border-bottom-right-radius:12px.

Everything works in Chrome and Firefox, but in IE11, the image shows up with square corners instead of rounded corners.

I also have this meta tag in my html: <meta http-equiv="X-UA-Compatible" content="IE=9" />

The code is below.
CSS:

body .overlay {
    background-color: rgba(0, 114, 198,.7);            
    height:100%;
    position:relative;
}
body .layer {
    background: url('photo-homebanner.jpg') 55%;
    position:relative;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
body .goldenDiv {
    width:665px;
    height:326px;
    position:fixed;
    z-index:100;
    margin-top:-38px;
    margin-left:-8px;
}       
body h1 {
    color:white;
    text-align:center;
    font-family:sans-serif;
    padding-top:22px;
    padding-bottom:5px;
    font-size:45px;
}
body h3 {
    color:white;
    text-align:center;
    font-family:sans-serif;
    font-weight:100;
    padding-bottom:14px;
}
body h3.hidden {
    visibility:hidden;
    padding-bottom:0px;
    position:absolute;
    top:220px;
    left:190px;
}
body input:focus {
    outline:none;
}
body .prettyInput {
    align-content: center;
    padding-left: 20px;
    padding-right: 70px;
    margin-left: 106px;
    width: 350px;
    height: 61px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 15px;
    border: hidden;
    margin-bottom: 40px;          
}
body .inputOverlap {
    position:absolute;
    top:167px;
    top:166px\9;
    left:485px;
    z-index:3;
    border-top-right-radius:12px;
    border-bottom-right-radius:12px;
}
body hr {
    color:white;
    position:absolute;
    top: 77px;
    left:120px;
    align-content:center;
}
@-moz-document url-prefix() {
    body .inputOverlap {
        position:absolute;
        top:168px;
        left:485px;
        z-index:3;
        border-top-right-radius:12px;
        border-bottom-right-radius:12px;
    }
}

HTML:

<body>
    <div class="goldenDiv">
        <div class="layer">
            <div class="overlay">
                <h1>Stay ahead of industry news!</h1>
                <hr width="450px"/>
                <h3>Let us send you the latest from our Marketing Department.</h3>
                <input id="emailAddress" type="text" class="prettyInput" required placeholder="Your email address here" />
                <input onclick="sendEmail()" type="image" width="57px" height="57px" class="inputOverlap" src="submitButton.jpg" />
                <h3 class="hidden" id="hiddenValidation">*Please enter a valid email address.</h3>
                <h3>100% privacy, no spam, just news.</h3>
            </div>
        </div>
    </div>
</body>

Upvotes: 0

Views: 608

Answers (1)

abluejelly
abluejelly

Reputation: 1306

The issue seems to be with IE's rendering of input[type="image"]- if you give it a border attribute you can see that the image is rendered ignoring the border-radius property.

Easiest way to fix would be to wrap the input[type="image"] in a div, apply the positioning, border, and sizing properties to the div (apply sizing to the input[type="image"] as well), and tag the div with overflow:hidden;.

Stylistic notes (unrelated to the problem):

border-radius: 0 12px 12px 0; means the same thing as 

border-top-right-radius:12px;
border-bottom-right-radius:12px;

but is less than half the locs. I suggest only using the verbose versions if you need to adjust only one corner and want whatever the others were set to to be preserved.


The height and width attributes on your image should be set in the CSS not on the input[type="image"]. Those attributes have been frowned upon for a very long time, especially since the CSS ones accomplish the same thing.

Upvotes: 1

Related Questions