Question 44673 in Html Question posted in
Some basic documentation can be found here.

How can you apply a border to only corners of a container in css? – Html

I would like to apply a border to only specific corners of a container, similar to the image below. There is a little border at the corner of the summary containers bellow. How can I achieve this? Thank you in advance.

enter image description here

Tags:

3

Answers


  1. 0

    border-radius:0px 0px 30px 30px;

    first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner.

    Login or Signup to reply.
  2. 0

    border-bottom-right-radius: 25px ;
    border-bottom-left-radius: 25px;

    You can write it in a single line.

    border-radius:0px 0px 25px 25px;

    To set different values for each corner, use the following syntax

    border-radius: top-left top-right bottom-right bottom-left;

    Login or Signup to reply.
  3. 0

    This answer is focusing more on approach than beautiful design or pattern.
    The approach is to have:

    1. 1x div as item container with relative position
    2. 4x div as corners with absolute position at top-left, top-right, bottom-right and bottom-left and have them showed their corresponding corner border radius as 1/4 Arc.
    3. Remember border-radius has 4 values for each corner like 0px 0px 5px 5px to draw radius only in bottom-right and bottom-left corner, for your 1st top image.

    It looks like this at the end:

    enter image description here

    The html codes let’s say index.html

    <html>
<head>
  <title>Design</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <h1>Design</h1>

  <div id="reaction" class="item">
    <div id="top-left" class="corner"></div>
    <div id="top-right" class="corner"></div>
    <div id="bottom-right" class="corner"></div>
    <div id="bottom-left" class="corner"></div>
    <div class="content">
      <img src="icon.png" class="icon" />
      <span class="title">Reaction</span>
      <span class="score">80 / 100</span>
    </div>
  </div>
</body>
</html>

    And CSS codes styles.css:

    .item {
  position: relative;
  border-radius: 5px;
  max-width: 300;
}
#reaction {
  background-color: #ffaaaa70;
}
.corner {
  position: absolute;
}
#reaction .corner {
  background: none;
  height: 10px;
  width: 10px;
}
#top-left {
  top: 0;
  left: 0;
  border-radius: 5px 0 0 0;
  border-top: 2px solid #ff7777;
  border-left: 2px solid #ff7777;
}
#top-right {
  top: 0;
  right: 0;
  border-radius: 0 5px 0 0;
  border-top: 2px solid #ff7777;
  border-right: 2px solid #ff7777;
}
#bottom-right {
  bottom: 0;
  right: 0;
  border-radius: 0 0 5px 0;
  border-bottom: 2px solid #ff7777;
  border-right: 2px solid #ff7777;
}
#bottom-left {
  bottom: 0;
  left: 0;
  border-radius: 0 0 0 5px;
  border-bottom: 2px solid #ff7777;
  border-left: 2px solid #ff7777;
}
.content {
  padding: 16px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.icon {
  height: 24;
  width: 24;
}
.title {
  font-size: 16px;
  font-weight: bold;
}
#reaction .title {
  color: #ff7777;
}
.score {
  color: '#444444'
}

    From there you can apply for other items with their own colors, and use appropriate pattern if using CSS framework.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search