JSFiddle - React, Tailwind, and code Playground
HTML
<div id="modal">
<h1>Ciekawe bugi:</h1>
<ul>
<li>W <strong>Chrome 11 beta</strong> widoczne sa ukosne linie pomiedzy poszczegolnymi czesciami outline'a (np. pomiedzy gorna a prawa jego czescia);</li>
<li><strong>Firefox 4</strong> pokazuje biale tlo pod cieniem boxa, ktore zakrywa outline;</li>
<li><strong>Firefox 4</strong>, <strong>Chrome 11 beta</strong> i <strong>Opera 11</strong> nie zaokraglaja rogow outline'a co skutkuje brzydkim wygladem boxu.</li>
</ul>
</div>
CSS
#modal {
width: 460px;
padding: 20px;
background: #ffffee;
position: absolute;
top: 100px;
left: 50%;
margin-left: -250px;
border-radius: 20px;
border: solid 2px #000000;
box-shadow: 0 0 30px #000000;
}
body {
font-family: sans-serif;
font-size: 0.9em;
}
h1 {
font-size: 1.1em;
font-weight: bold;
margin-bottom: 0.3em;
}
ul {
list-style-type: disc;
margin-left: 2em;
}
strong {
font-weight: bold;
}