Titulos con bordes estilizados

Modelo 1: Titulo


Modelo 2: Titulo




Código HTML: (Nota: en modelo 2 lo que cambia es el ancla:decorator2
<decorator1>Modelo 1: Titulo </decorator1>

Código CSS Modelo 1
<style> decorator1 { border-radius: 19px 19px 101px 101px; position: relative; text-align: center; margin-left: 3em; margin-right: 0; text-transform: capitalize; background-color: yellow; text-shadow: 2px 2px #FF0000; box-shadow:7px 4px 9px purple; font-size:26px; font-family: tahoma; padding: 12px 5px; width: 360px; border: 1px solid #FF0000; height: 30px; display: inline-block; } </style>

Código CSS Modelo 2

<style> decorator2 { background-color: azure; font-size:16px; padding: 22px 25px; font-family: cyber; border-left: 5px double black; } </style>



Fuente:
https://html-css-js.com/css/generator/border-radius/