HTML Div element have curved border

Question

enter image description here

I want to have the bottom curved in my Header Div. Basically the div should be slanted, i tried the below, and its working in all latest browser's except ie8 & below

<div class="HeaderTitle" style="background: #000;">
        <h1 class="header">
            PROMOTIONS</h1>
    </div>


#Container #InnerPages .HeaderTitle 
{
    padding: 115px 0 0 0; background-color: #000; 
    margin-right: -20px;
    -webkit-transform: rotate(5deg); /* Safari and Chrome */ 
    -moz-transform: rotate(5deg);    /* Firefox */
    -o-transform: rotate(5deg);      /* Opera */
    -ms-transform: rotate(5deg);     /* IE 9 */
    transform: rotate(5deg);
}
#Container #InnerPages .header
{
    text-align: center; color: #fff; font-size: 30px; margin: 0; padding: 0 0 26px; 
    -webkit-transform: rotate(-5deg); /* Safari and Chrome */ 
    -moz-transform: rotate(-5deg);    /* Firefox */
    -o-transform: rotate(-5deg);      /* Opera */
    -ms-transform: rotate(-5deg);     /* IE 9 */
    transform: rotate(-5deg);
}

But this doesnt work in IE & my client is very adamant that it should work in IE 8 :-(

Any help please...

You can use modernizer.

Kuzgun
– Kuzgun

2014-02-06 13:18:06 +00:00
Commented Feb 6, 2014 at 13:18 — Kuzgun
– Kuzgun, Commented Feb 6, 2014 at 13:18
This jQuery plugin might help you jquery.malsup.com/corner

Vijayakumar Selvaraj
– Vijayakumar Selvaraj

2014-02-06 13:19:43 +00:00
Commented Feb 6, 2014 at 13:19 — Vijayakumar Selvaraj
– Vijayakumar Selvaraj, Commented Feb 6, 2014 at 13:19

Krunal Panchal · Accepted Answer · 2014-02-06 13:26:12Z

Solution 1 Use IETransformsTranslator

It's an on-line tool With this tool you can make matrix filter transforms what works on IE6,IE7 & IE8. Just paste you CSS3 transform functions (e.g. rotate(15deg) ) and it will do the rest.

Solution 2

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

The rotation property of the BasicImage filter can accept one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degress respectively.

Solution 3

Since this answser is still getting up-votes, I feel I should update it with information about a javacript library called CSS Sandpaper that allows you to use (near) standard CSS code for rotations even in older IE versions.

Once you've added CSS Sandpaper to your site, you should then be able to write the following CSS code for IE6-8:

-sand-transform: rotate(25deg);

Hope this helps you :)

ArmaGeddON · Accepted Answer · 2014-02-06 13:25:38Z

0

Basically you want curves for IE8

This will help

.div
{
   -webkit-border-radius:4px;        /* older webkit based browsers */
   -khtml-border-radius:4px;         /* older khtml based browsers */
   -moz-border-radius:4px;           /* older firefox */
   border-radius:4px;                /* standard */
   behavior: url(border-radius.htc); /* IE 6-8 */
}

answered Feb 6, 2014 at 13:25

ArmaGeddON

3391 silver badge10 bronze badges

Collectives™ on Stack Overflow

HTML Div element have curved border

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related