Nello script precedente abbiamo visto come gli pseudo-elementi :before e :after ci consentano facilmente di inserire elementi da utilizzare per applicare un comportamento al contenitore, senza modificare l'HTML.

Nello script di oggi vedremo come ottenere, con questa possibilità, un bordo arrotondato e sfumato. Ci basta definire queste regole, facendo attenzione a come andiamo ad ancorare in maniera assoluta uno pseudo-elemento prima dell'elemento stesso, a cui andiamo a specificare il bordo di sinistra, sfruttando la possibilità di definirlo arrotondato e con l'alpha, per la trasparenza.

.roundedBorder {
  position: relative;
  overflow: hidden;
  padding-left: 20px;
}
.roundedBorder:before {
  content: ""; 
  position: absolute; 
  width: 10px; 
  top: 5%; 
  height: 90%; 
  left: -10px; 
  border-radius: 15px / 50px; 
  box-shadow:0 0 13px rgba(0,0,0,0.6); 
}}

L'effetto che otterremo una volta che abbiamo applicato questo CSS è contenuto nell'immagine seguente: