Strange UI with border-radius

Issue #6661381 • Assigned to Christian F.


Feb 24, 2016
This issue is public.
Reported by 0 people

Sign in to watch or report this issue.

Steps to reproduce


Repro Steps:


Below is the code to reproduce this issue

<!DOCTYPE html>



<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">



body {

background-color: #000;

color: #0D0;


.test {

display: block;

width: 100%;

padding: 0;

margin: 0;


.test div {

background-color: #FFF;

display: inline-block;

height: 50px;

border-radius: 0;

padding: 0;

margin: 0;


.test div.d1{

width: 10%;

border-top-left-radius: 10px;

border-bottom-left-radius: 10px;


.test div.d2{

width: 80%;


.test div.d3{

width: 10%;

border-top-right-radius: 10px;

border-bottom-right-radius: 10px;


.test div.d {

border-radius: 0;





<h1>Using border radius</h1>

<div class="test">

<div class="d1"></div><div class="d2"></div><div class="d3"></div>


<h1>Not using border radius</h1>

<div class="test">

<div class="d1 d"></div><div class="d2"></div><div class="d3 d"></div>




Expected Results:


UI is displayed well as the other browsers

Actual Results:


Dev Channel specific:




0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Sermet I.”

      Changed Assigned To to “Christian F.”

      Changed Steps to Reproduce

      Changed Assigned To from “Christian F.” to “Steven K.”

      Changed Assigned To from “Steven K.” to “Christian F.”

    You need to sign in to your Microsoft account to add a comment.

    Sign in