How can I create a ticket shape with dotted line with pure CSS?

Question

I want to create a ticket shape ( with 4 corners cropped with circles ) with pure css, but I have encountered some difficulties when I am trying to add a border for it. I have tried to deal with box-shadow but I failed. I am trying to make it with two styles- 1. I can have 3px border for the whole shape including the rounded corners 2. I can have a 3px border for the whole shape but in dotted line style

As I am not really familiar with box-shadow and it is hard for me to fulfill the desired style. Could anyone give me some hints on it please? Thank you so much.

 .ticket { font-family: Arial; font-size: 12px; font-weight: bold; position: relative !important; background: #4a4a4a; float: left; padding: 35px 30px; margin: 0 50px 50px 0; } .ticket:after { content: ""; position: absolute !important; z-index: 100; top:0; left: 0; border-right: #fff 7px solid; border-bottom: #fff 7px solid; -moz-border-radius: 0 0 20px 0; -webkit-border-radius: 0 0 20px 0; border-radius: 0 0 20px 0; background-color: white; } .ticket:before { content: ""; position: absolute !important; z-index: 100; top: 0; right: 0; border-left: #fff 7px solid; border-bottom: #fff 7px solid; -moz-border-radius: 0 0 0 20px; -webkit-border-radius: 0 0 0 20px; border-radius: 0 0 0 20px; } .ticket a { padding: 35px 35px 35px 20px; text-decoration: none; color: #fff; white-space: nowrap; } .ticket a:hover {color: rgba(0,0,0,0.5);} .ticket a:after { content: ""; position: absolute !important; z-index: 100; bottom: 0; left: 0; border-right: #fff 7px solid; border-top: #fff 7px solid; -moz-border-radius: 0 20px 0 0; -webkit-border-radius: 0 20px 0 0; border-radius: 0 20px 0 0; } .ticket a:before { content: ""; position: absolute !important; z-index: 1000; bottom: 0; right: 0; border-left: #fff 7px solid; border-top: #fff 7px solid; -moz-border-radius: 20px 0 0 0; -webkit-border-radius: 20px 0 0 0; border-radius: 20px 0 0 0; } 

 <div class="ticket"><a href="#">Box A</a></div> <div class="ticket"><a href="#">Box B</a></div> <div class="ticket"><a href="#">Box C</a></div> <div class="ticket"><a href="#">Box D</a></div> 

Answer 1

Here is an idea where you can also use dotted border on the pseudo element while hiding some of the border from the main element:

 .ticket { font-size: 20px; position: relative; background: #4a4a4a; float: left; padding: 35px 30px; margin:20px; border:4px dotted #fff; } .ticket:after, .ticket:before, .ticket a:after, .ticket a:before { content: ""; position: absolute; z-index: 1; width: 15px; height: 15px; background: linear-gradient(#fff,#fff) padding-box, #4a4a4a; } .ticket:after { top: -5px; left: -5px; border-right: #fff 5px dotted; border-bottom: #fff 5px dotted; border-radius: 0 0 20px 0; } .ticket:before { top: -5px; right: -5px; border-left: #fff 5px dotted; border-bottom: #fff 5px dotted; border-radius: 0 0 0 20px; } .ticket a { padding: 35px; text-decoration: none; color: #fff; } .ticket a:after { bottom: -5px; left: -5px; border-right: #fff 5px dotted; border-top: #fff 5px dotted; border-radius: 0 20px 0 0; } .ticket a:before { bottom: -5px; right: -5px; border-left: #fff 5px dotted; border-top: #fff 5px dotted; border-radius: 20px 0 0 0; } 

 <div class="ticket"><a href="#">Box A</a></div>