CODEWITHSUNDEEP
htmlcssangularjsborderionic-framework
esastincy
esastincy

Reputation: 1627

Adding border-radius to one column in ionic row

Inside of an ionic view I have something like this

<div>
  <div class="row">
    <div class="col col-80" style="background-color: lightgrey;border: 1px solid;border-radius: 15px;">Row 1</div>
    <div class="col" style="text-align: center;"><a class="icon ion-edit"></a></div>
  </div>
  <div class="row">
    <div class="col col-80" style="background-color: lightgrey;border: 1px solid;border-radius: 15px;">Row 2</div>
    <div class="col" style="text-align: center;"><a class="icon ion-edit"></a></div>
  </div>
</div>

What I want is the first column to have a background color and only have a border around the entire column and have that border have a border-radius. Obviously the current code is going to great a seperate border around each row and thats not what I am looking for. Is there a way to make it one border?

Upvotes: 0

Views: 12369

Answers (1)

Kubol
Kubol

Reputation: 136

Yeah, you can use something like this:

<div>
  <div class="row">
    <div class="col col-80" style="background-color: lightgrey;border: 1px solid;border-top-left-radius: 15px;">Row 1</div>
    <div class="col" style="text-align: center;"><a class="icon ion-edit"></a></div>
  </div>
  <div class="row">
    <div class="col col-80" style="background-color: lightgrey;border: 1px solid;border-bottom-left-radius: 10px;">Row 2</div>
    <div class="col" style="text-align: center;"><a class="icon ion-edit"></a></div>
  </div>
</div>

https://jsfiddle.net/fu0gxgvt/

If I understood your question.

Upvotes: 1

Related Questions