Alguém sabe como faço para deixar a legenda do formulário abaixo dentro da border line ? Ou seja, gostaria que a legenda ficasse dentro da linha do contorno do form.
<legend>Filtro por data</legend>
<div class="row second-group">
<div class="col-md-3">
<div class="form-group">
<label>Conta Corrente </label>
<dx-select-box placeholder="Selecione Conta..." [items]="contasCorrente" displayExpr="descricao" valueExpr="id" [searchEnabled]="true" formControlName="contaCorrenteId">
</dx-select-box>
<span class="text-danger" *ngIf="displayMessage.contaCorrenteId">
<p [innerHTML]="displayMessage.contaCorrenteId"></p>
</span>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="dataEmissaoInicial">Data Emissão Inicial</label>
<dx-date-box type="date" width="100%" displayFormat="dd/MM/yyyy" formControlName="dataEmissaoInicial" (onValueChanged)="definirValor($event)"></dx-date-box>
<span class="text-danger" *ngIf="displayMessage.dataEmissaoInicial">
<p [innerHTML]="displayMessage.dataEmissaoInicial"></p>
</span>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="dataEmissaoFinal">Data Emissão Final</label>
<dx-date-box [min]="minDate" [max]="maxDate" type="date" width="100%" displayFormat="dd/MM/yyyy" formControlName="dataEmissaoFinal" (onValueChanged)="definirValor($event)"></dx-date-box>
<span class="text-danger" *ngIf="displayMessage.dataEmissaoFinal">
<p [innerHTML]="displayMessage.dataEmissaoFinal"></p>
</span>
</div>
</div>
<div class="col-md-3">
<button type="button" style="margin-top: 27px" class="btn btn-block btn-success" (click)="filtrarConciliacao()">
<i class="fa fa-refresh"></i> Filtrar </button>
</div>
</div>
Atualmente está assim: