JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<title>Border radius</title>
<style type="text/css">
body {
background : #3cf;
}
p {
margin : 10px;
}
input, textarea, select {
width : 300px;
padding : 8px;
font-size : 20px;
border : 1px solid #666;
border-radius : 8px;
}
input.i1 { width : 200px; }
input.i2 { width : 300px; }
input.i3 { width : 250px; }
input[type=submit] { cursor : pointer }
textarea { overflow : auto }
</style>
<!--[if IE 8]>
<style type="text/css">
span.w1 {
display : inline-block;
position : relative;
background : transparent;
}
span.w1 span {
background : transparent;
}
input, textarea, select {
z-index : 5;
background : transparent;
border : none;
}
span.w1:before, span.w1:after,
span.w2:before, span.w2:after {
content: '';
position : absolute;
display : block;
width : 8px;
height : 8px;
z-index : 10;
/* background : url(circle16dwhite.png) transparent no-repeat; */
background : url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAARxJREFUeNqsk6FuhEAURYepIQGNQewq0HWI9STYhn9A0qza8AFVm4LjJ/oBoCtIKqpBtIvAkwCuLe0habKi3UDYKxDz7nkzvLmjqKoqzhUEwaFpmrvT6WTXda2xttlshu12W5qm+ZSm6cO5X/ltsN/vd1VVPQ7DcOu67o3jOMK27alWlqUoikJkWfapadqrZVn3x+PxeSrSIIqined5b3Ecj13Xjf+JGh68MNPmfHzff6EwV3hhpgZhGB5+On5c2vmvk8DASgbGP+u6LuYKLwysZNoMbKlgYIVhGF9t245LBQMrxUpJQsI9LxUMrCRhhGSpYGAl8SRhfd/PhvHCwK4O0jREsp3n+XuSJOLSSajhwQtzlcekrH3O3wIMAFyBh+JgxKixAAAAAElFTkSuQmCC) transparent no-repeat;
}
span.w1:before {
top : -1px;
left : -1px;
background-position : top left;
}
span.w1:after {
top : -1px;
right : -1px;
background-position : top right;
}
span.w2:before {
left : -1px;
bottom : -1px;
background-position : bottom left;
}
span.w2:after {
bottom : -1px;
right : -1px;
background-position : bottom right;
}
span.w3:before, span.w3:after {
content : '';
position : absolute;
display : block;
z-index : 10;
background : #fff;
border-style : solid;
...