IE8 border-radius property doesn't display in IE developer toolbar (F12)

Question

In a Drupal project I can not see the border-radius property in the Developer Toolbar.
I also tried adding an inline border style, but the property disappears.
http://goa.drupal.com.pe/inmuebles/venta-departamento-0

enter image description here

This is the html head:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 ie" xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language; ?>" version="XHTML+RDFa 1.0" dir="<?php print $language->dir; ?>" <?php print $rdf_namespaces; ?>> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 ie" xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language; ?>" version="XHTML+RDFa 1.0" dir="<?php print $language->dir; ?>" <?php print $rdf_namespaces; ?>> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 ie" xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language; ?>" version="XHTML+RDFa 1.0" dir="<?php print $language->dir; ?>" <?php print $rdf_namespaces; ?>> <![endif]-->
<!--[if IE 9]>    <html class="no-js ie9 ie" xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language; ?>" version="XHTML+RDFa 1.0" dir="<?php print $language->dir; ?>" <?php print $rdf_namespaces; ?>> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language; ?>" version="XHTML+RDFa 1.0" dir="<?php print $language->dir; ?>" <?php print $rdf_namespaces; ?> xmlns:fb="http://www.facebook.com/2008/fbml"> <!--<![endif]-->

<head profile="<?php print $grddl_profile; ?>">
  <?php print $head; ?>
  <title><?php print $head_title; ?></title>
  <?php print $styles; ?>
  <?php if ($mobile_friendly): ?>    
    <meta name="viewport" content="width=device-width" />
    <meta name="MobileOptimized" content="width" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
  <?php endif; ?>
  <?php print $scripts; ?>

ORION · Answer 1 · 2012-10-23T17:05:09.810

2

Border Radius isn't supported in Internet Explorer in versions less than 9, but if you are using IE9 AND it still isn't working, you can try adding this meta tag to set the compatibility mode to IE9:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

edited Oct 23 '12 at 17:05

answered Oct 23 '12 at 16:49

ORION

2,374
2
22
31

The border already works for my IE9. Can you explain the benefit of using that meta? – Ricardo Castañeda Oct 23 '12 at 16:59
1

I was stating that if he was using IE9 and it still isn't working, try adding this meta tag to set the compatibility mode to IE9. If you'd like more info, check out http://stackoverflow.com/questions/5317464/why-does-ie9-require-a-meta-tag-to-render-rounded-corners. – ORION Oct 23 '12 at 17:02

score 1 · Accepted Answer · edited May 23 '17 at 10:34

1

It's not supported in IE8 that's why.

You can have a look at this post for alternate solution using jQuery.Corner plugin.

edited May 23 '17 at 10:34

Community

1
1

answered Oct 23 '12 at 16:49

Yan Brunet

4,727
2
25
35

Just IE8? I can see it in IE7 in a different project. – Ricardo Castañeda Oct 23 '12 at 16:53
You can see the property in Developers tools or you can see the rounded corner ? Because like I mentioned in my post, there is ways of bypassing this issue, but it always involved rendering an image with rounded corners. – Yan Brunet Oct 23 '12 at 16:59

score 1 · Answer 3 · answered Oct 23 '12 at 16:50

1

IE8 doesn't support border-radius, and Developer Tools drop off any tags or attributes that the browser doesn't recognize.

answered Oct 23 '12 at 16:50

jalynn2

6,397
2
16
15

IE8 border-radius property doesn't display in IE developer toolbar (F12)

3 Answers3