Strange UI with border-radius

Issue #6661381 • Assigned to Christian F.

Details

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

Sign in to watch or report this issue.

Steps to reproduce

Uhttps://jsfiddle.net/z0c9y2rb/](https://jsfiddle.[https://jsfiddle.net/z0c9y2rb/](https://jsfiddle.net/z0c9y2rb/)

Repro Steps:

==============

Below is the code to reproduce this issue

<!DOCTYPE html>

<html>

<head>

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

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

<title>test</title>

<style>

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;

}

</style>

</head>

<body>

<h1>Using border radius</h1>

<div class="test">

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

</div>

<h1>Not using border radius</h1>

<div class="test">

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

</div>

</body>

</html>

Expected Results:

==============

UI is displayed well as the other browsers

Actual Results:

==============

Dev Channel specific:

================

No

Attachments

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