How to create border with help of css3 like the bellow image.
There is a border-radius notation for horizontal and vertical radius,
border-radius: horizontal-radius/vertical-radius;
Using this you can create the desired border.
.border {
width: 250px;
height: 50px;
border: 1px dashed #aaa;
border-radius: 50%/20%;
text-align: center;
line-height: 50px;
font-size: 30px;
color: red;
font-family: Helvetica;
}
<div class="border">Text Here</div>
Modify the border values according to your need.
You can use border radius in order to get the 'curved' border of the div. Along with adding a dashed border, you can add uppercasing and text aligning for your text.
Result
div {
width: 250px;
height: 50px;
font-family: Helvetica;
border: 1px dashed gray; /*Makes dashed border*/
border-radius: 50%/10px; /*Change the px value in order to change border curvature*/
text-align: center;
line-height: 50px;
font-size: 30px;
color: red;
text-transform:uppercase;
}
<div>Text Here</div>
Related
Context
I'm trying to show an icon icon-delete-2a.png on the border of a div.
I can't seem to bring the icon forward using z-index.
Furthermore I am also looking at 'the best way' to dynamically position the icon using CSS. When innerText would equal "TestTestTest", the width of my userItem is adjusted, but the icon should shift to the right as well. Calculating the length of the userItem with JS to then adjust it's style ain't that practical.
Related issues
Several other people asked about this, but unfortunately, the proposed solutions (setting position: relative; on the parent and setting position: absolute; z-index: 1 on the child) didn't seem to resolve my issue. See:
CSS - Add icon on left of border with relative position
z-index not working with fixed positioning
Position div on the border of another div
Minimal Working Example
.useritem {
position: relative;
height: 15.625px;
padding-left: 6.25px;
padding-right: 6.25px;
display: inline-block;
text-align: center;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 10px;
font-weight: 400;
line-height: 1.5;
color: #ffffff;
background: #ff0000;
/* Center slide text vertically */
align-items: center;
border: 1px solid #ff0000;
border-radius: 10px;
margin-bottom: 1px;
margin-right: 3px;
overflow: auto;
word-wrap: break-word;
}
.icon_delete {
position: absolute;
bottom: 7.5px;
left: 20px;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.useritem:focus {
background: #ffffff;
color: #000000;
border-radius: 10px;
border: 1px solid #000000;
}
[contenteditable] {
outline: 0px solid transparent;
}
<body>
<div class="useritems">
<div class="row">
<div class="useritem" id="Location_Explore_UserItem_00" contenteditable="true" style="border: 2px solid black; background: rgb(255, 255, 255); color: rgb(0, 0, 0);">Test<img class="icon_delete" src="https://i.ibb.co/jTQckJm/icon-delete-2a.png" width="15" height="15">
</div>
</div>
</div>
</body>
This happens because of overflow attribute. Set the overflow value to initial or scroll on .useritem and you will see the icon outside.
.useritem {
position: relative;
height: 15.625px;
padding-left: 6.25px;
padding-right: 6.25px;
display: inline-block;
text-align: center;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 10px;
font-weight: 400;
line-height: 1.5;
color: #ffffff;
background: #ff0000;
/* Center slide text vertically */
align-items: center;
border: 1px solid #ff0000;
border-radius: 10px;
margin-bottom: 1px;
margin-right: 3px;
word-wrap: break-word;
overflow: initial;
}
.icon_delete {
position: absolute;
bottom: 7.5px;
right: -8px;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.useritem:focus {
background: #ffffff;
color: #000000;
border-radius: 10px;
border: 1px solid #000000;
}
[contenteditable] {
outline: 0px solid transparent;
}
<body>
<div class="useritems">
<div class="row">
<div class="useritem" id="Location_Explore_UserItem_00" contenteditable="true" style="border: 2px solid black; background: rgb(255, 255, 255); color: rgb(0, 0, 0);">Test<img class="icon_delete" src="https://i.ibb.co/jTQckJm/icon-delete-2a.png" width="15" height="15">
</div>
</div>
</div>
</body>
You have used "overflow" css that's why it's not showing. Remove overflow css you can see your icon position.
I've got an input box when I apply border-radius to it there is a white space between the input-box and border.
Not sure why it is appearing. Please help
Note: i'm using bootstrap 3
.form-control {
padding: 0 8px;
line-height: 24px;
font-size: 12px;
font-weight: bold;
border: 2px solid #1d79d1;
color: #1d79d1;
min-width: 96px;
height: 32px;
border-radius: 32px;
background-color: #1d79d1;
}
<input class="form-control filter-button selectedBorder">
remove Borders as you're giving same colors to both border and
As your border color and background color are the same: Remove border and increase height or padding to compensate for height of border.
.form-control {
padding: 0 8px;
line-height: 24px;
font-size: 12px;
font-weight: bold;
color: #1d79d1;
min-width: 96px;
height: 34px;
border-radius: 32px;
background-color: #1d79d1;
}
I had similar issues. The input field and submit type can have rendering issues with border and border-radius feathering the border and background color.
You can us a box shadow to achieve the same effect.
.form-control {
padding: 0 8px;
line-height: 24px;
font-size: 12px;
font-weight: bold;
/* Change This */
/* border: 2px solid #1d79d1; */
border: none;
/* Add This */
box-shadow: 0 0 0 2px #1d79d1;
color: #1d79d1;
min-width: 96px;
height: 32px;
border-radius: 32px;
background-color: #1d79d1;
}
<input class="form-control filter-button selectedBorder">
I have three inline block elements inside a a container div.
The HTML looks like this:
<div class="container">
<div class="field">Text</div>
<div class="field">Text</div>
<div class="arrow"></div>
</div>
The CSS looks like this:
.container {
padding: 10px;
border: solid 1px #e5e5e5;
border-radius: 3px;
background-color: white;
box-sizing: border-box;
font-size: 0;
}
.field {
font-size: 16px;
display: inline-block;
}
.arrow {
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #f00;
vertical-align: middle;
}
I can't see anything wrong with this HTML/CSS, but the arrow does not appear in the middle of the container. Instead, the arrow is near the bottom of the container. Also, when I unset the vertical-align: middle property, the arrow moves farther up in the div, which is weird. If I set vertical-align: top then the arrow does go to the top of the div. Any idea why this is?
Default vertical-align is baseline. This will operate differently than true middle when paired with middle. Try setting all three to middle.
.container {
padding: 10px;
border: solid 1px #e5e5e5;
border-radius: 3px;
background-color: white;
box-sizing: border-box;
font-size: 0;
}
.field {
font-size: 16px;
display: inline-block;
vertical-align: middle;
}
.arrow {
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #f00;
vertical-align: middle;
}
<div class="container">
<div class="field">Text</div>
<div class="field">Text</div>
<div class="arrow"></div>
</div>
Change .arrow from inline-block to inline
https://jsfiddle.net/aznfacLe/
This is where I am trying to accomplish this effect:
http://www.smalldot.agency/ccren/goals-page/
As the "val" bar increases in width, it should overlap the "current" text ((which is the same text as "val" but a different color)). I am able to force "current"'s copy on top of the "val" element, but I can't get it to rest underneath instead.
If I place the "current" p class below the "val" div class, the the text from "current" shows up south of the progress bar, rather than beneath it.
Also, the z-index: 0; doesn't seem to be doing anything to fix the problem.
HTML:
<div class="progdiv" style="width:100%;">
<p class="current">1,234</p>
<div class="val" style="width:3%;">1234</div>
</div>
CSS
.val {
height:100%;
border-radius:3px;
line-height: 1.5em;
font-size: 12pt;
background: #019BA9!important;
text-align: left!important;
vertical-align: center;
-webkit-box-shadow: 3px 3px 2px #bbbbbb;
overflow:hidden;
}
.progdiv {
background-color: #FFFFFF!important;
height: 1.5em;
text-align: right;
vertical-align: center;
border: solid 1px #eeeeee;
border-radius: 3px;
-webkit-box-shadow: inset 3px 3px 2px #bbbbbb!important;
text-align: left!important;
overflow: hidden!important;
}
.current {
text-indent: 6px;
height:100%;
border-radius:3px;
font-size: 12pt;
line-height: 1.5em;
text-align: left!important;
vertical-align: center;
color: #019BA9!important;
position:absolute!important;
text-align: left!important;
z-index: 0;
}
Just add position: absolute; to the .val CSS. Also remove the height:100% from both the .val and .current CSS.
I'm trying to center a single character, like this:
<div class='button'>x</div>
<div class='button'>+</div>
<div class='button'>*</div>
.button {
border: solid 2px #aaa;
-moz-border-radius:2px;
-webkit-border-radius:2px;
color: #888;
width: 16px;
height: 16px;
font-weight: bold;
text-align:center;
float: left;
margin-right:5px;
font:14px Helvetica Neue,Helvetica,Arial,sans-serif;
line-height: 100%;
}
this centers the character in each div horizontally, but not vertically - what do we need to do to center it vertically as well?
Thanks
Since it's a single character:
line-height: 100%;
and if setting line-height to 100% didn't work set it to the fixed height of the container:
.button {
height:300px;
width: 300px;
text-align: center;
line-height: 300px;
border: 1px dotted #999;
}
Check here: http://jsfiddle.net/7afUH/1/