Explore the world of interior CSS border styles


Trying to achieve a unique border effect like the one shown in the image. Experimented with different styles such as inset, outset, ridge, and groove, but unable to get the desired outcome. Is there a way to create a border that bends inwards towards the middle and then back upwards (hopefully this makes sense)?

If this question has been asked before, please provide a link to the solution.

Thank you for your help.
This is what I have attempted so far:

        div {  
              border-bottom: 1px ridge #B5B9BB;
              /*border-bottom: 1px inset #B5B9BB;
              border-bottom: 1px outset #B5B9BB;
              border-bottom: 1px groove #B5B9BB; */
            }
htmlcsscss-shapes

Answer №1

To achieve this effect, you can utilize the outline property:

.highlighted {
    border-bottom: 1px solid grey;
    background: aliceblue;
    outline: 5px solid aliceblue;
}
<div class="highlighted">Highlighted Text</div>

View Demo

Answer №2

Why not simply add a border to the text?

div {
  background: lightgrey;
  padding: 0.5em;
}
p {
  border-bottom: 1px ridge #B5B9BB;
}
<div>
  <p>Available Apps</p>
</div>

Answer №3

To ensure more flexibility and support for features like border-radius and box-shadows, it is recommended to use a wrapping element instead of relying solely on the outline property.

Here's an example:

<div class="section-wrapper">
    <h3>Featured Products</h3>
</div>

Accompanied by the following CSS:

.section-wrapper {
  background: #F2F5F8;
  padding: 10px;
}  
.section-wrapper h3 {
  border-bottom: 1px solid #C3C7CA;
}

Answer №4

Whenever faced with a similar dilemma, I prefer using the box-shadow property:

body {
    background:#D1D6D9;
    font-family:verdana;
}
div {
    border-bottom: 1px solid #B5B9BB;
    box-shadow:0 1px 1px rgba(255,255,255,.7);
    padding-bottom:5px;
}
<div>Available Apps</div>

Answer №5

If you're looking to create a horizontal line in HTML, one option is to use the

tag and style it using CSS to match your design preferences.

Here's an example of how you can implement a horizontal line in your code:

Add this line to separate sections:
<hr>

Answer №6

Give this a try as well, but be sure to include an additional div element.

HTML

<div class="outerDiv">
    Content
    <div class="innerDiV">
    </div>
<div>

CSS

.outerDiv{
    background-color: grey;
  height: 32px;
  text-align: center;
  padding: 16px;
  font-weight: bolder;
  font-size: 25px;
}
.innerDiV{
   margin: 0 auto;
  border: 1px solid black;
  width: 98%;
  margin-top: 10px;
}

Demo

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Something seems off with Chrome

I am facing a unique issue that I need help with. Unfortunately, the code is too long to post here but essentially it involves creating a menu for a website. The menu works perfectly and looks great on all browsers except for Chrome. This is unusual as Ch ...

htmlcssgoogle-chromefrontend

Enable the expansion of a div by dragging and dropping an image onto it

Take a look at this fiddle. In this fiddle, I am able to drag and drop images onto the .drop-zone. However, I would like to enhance it so that when I drag an image onto it, the .drop-zone div expands to where I place the image. It's okay if the expand ...

javascriptjquerycssjquery-ui

Verify the accuracy of the color value on a web page using Selenium in Java

As a beginner in using Selenium with Java, I encountered an issue related to a symbol in my connected class turning green. I needed to assert whether the symbol actually changed its color. Below is the code snippet that I used: Boolean connectionSymbolG ...

javacssseleniumcss-selectors

Error! D3.js is throwing an Uncaught TypeError because it cannot find the function .enter(...).append(...).merge

Currently, I am facing an issue while attempting to construct a table with multiple nested dropdowns using d3.js. The problem arises when switching from a newer version of d3 where my code functions flawlessly to d3.js v3. Upon replacing the newer version ...

javascripthtmld3.jshtml-tabledata-visualization

What is the best way to maintain the position of components (such as a Card component) when one is expanded in a Material-UI and ReactJS project

Currently, I am working with an expandable Card component from Material-UI and using flex for aligning the components. However, when one card expands, it affects the positioning of the other components in the row: https://i.stack.imgur.com/vGxBU.png What ...

javascripthtmlcssreactjsmaterial-ui

Understanding the user's preference for text alignment and managing how the text is displayed in a text area (or text field) within a ReactJS application

My latest project is an app that features multiple text areas. Personally, I use the app with two languages - English and another language that is aligned to the right. However, the default setting has the text-areas aligning to the left. To change this ...

htmlcssreactjstext-align

Tips for clearing floated images when the sidebar is also floated

Can someone assist me with this code snippet? I am trying to figure out a way to clear the nearest floated block. It seems that whenever I use the clear property, it clears any floated blocks on the page, even if they are in a different div. Here is the ...

htmlcsscss-float

angularjs issue with displaying data in ui-grid

Seeking assistance on implementing data display using ui-grid. Currently facing an issue where the grid is not showing any data, although when using a table with <tr ng-repeat="transaction in savingaccountdetails.transactions>, the data is displayed ...

angularjshtmlui-grid

Information is cleared before it is transmitted

Let's begin with the following code: JavaScript: function keyPressed(e) // function for key press event { if (e.keyCode == 13) // 13 represents the enter key { $(this).val(""); } } $(document).ready(function () { $(' ...

phpjavascriptjqueryhtmlajax

Adjusting the dimensions of a button: What to expect

I'm currently working on a toggle switch that I want to make responsive for future resizing. The toggle switch includes a red square (for demonstration purposes), but I've encountered an issue where the red square stretches and changes its dimens ...

htmlcss

Updating URL links with PHP and DOM manipulation

I am attempting to transform all the links within an HTML variable into random ones using PHP. However, I am encountering an issue that is preventing the links from being properly changed. Below is the code snippet I am working with: <?php $jobTempla ...

phphtmldom

Expression fragment in Thymeleaf

In splitting my templates into head/main/footer parts using thymeleaf, I have found a method to include stylesheets and javascript on certain pages while excluding them from others. This is achieved through the use of fragment expressions outlined here. M ...

javascriptjqueryhtmlthymeleaf

Record client's real-time decision in the database

Is it possible to use jQuery to update a specific cell in phpMyAdmin after adding a div to a particular group? Take a look at the code below: <div id="item1">Item 1 <input type="button" value="put me in Group1" name ...

phphtmljquerysql

Utilize multiple classes in inline styling within HTML

I'm trying to dynamically apply the "more" CSS class directly to an inline style tag, but I haven't had success with my current approach. Unfortunately, in my situation, I can't create a class. The method is working for <p> tags but no ...

javascriptjqueryhtmlcss

Handling the width and borders of CSS cells that are positioned outside of a table

Welcome! I recently created a simple gantt organizer as part of a demo. My goal was to make the main table scrollable while keeping certain columns "frozen" for easy visibility when navigating through the data. To achieve this, I followed some advice found ...

htmlcss

Struggling to create a BMI Calculator using JS, the result is consistently displaying as 'NaN'

Having trouble creating a BMI Calculator using JavaScript. The issue I'm facing is that the calculation always returns 'NaN'. I've tried using parseInt(), parseFloat(), and Number() but couldn't solve the problem. It seems that the ...

javascripthtml

Arrange divs in a stack when one becomes too full

Struggling to find a pure CSS solution for this issue, so seeking advice. Imagine three divs aligned horizontally next to each other. If one div overflows onto the next line, I want them to switch to a vertical stack layout. How can this be achieved? I h ...

htmlcssoverflow

Creating identical class names for UL elements underneath LI using JavaScript

In my attempt to dynamically generate the class name within the ul element, I successfully achieved the expected result. The outcome can be viewed in the console of the snippet provided for reference. However, I'm facing a challenge when attempting t ...

javascripthtmlcssclassforeach

Stop unnecessary re-rendering of controlled React inputs

Recently, I delved into the world of React.js and came across controlled inputs. Sample Code: Check out my simple implementation: import React, { useState } from 'react'; const MyForm = () => { console.log('rendered'); // Li ...

htmlreactjs

I am unable to move HTML data to PHP

Here is my HTML code: <form action="test.php" method="get> <input type="text" name="text" /> </form> And this is my PHP code: <html> <head> <title>Result</title> </head> <body style="background: ...

phphtmlxampp